[React] React hook (훅) , 라이프 사이클

1. 훅(HOOK) 

 

😺 리액트에는 hook 훅 이라는 개념이 있다.

 

📍 Hook 이란? 

1. 리액트 컴포넌트는 클래스형 컴포넌트(Class component)와 함수형 컴포넌트(Functional component)로 나뉩니다.
2. 리액트 훅은 새로운 기능으로 React 16.8버전에 새로 추가된 기능
3. 함수형태의 컴포넌트에서 사용되는 몇가지 기술을 Hook이라고 부릅니다. (useState, useEffect 등)
4. 리액트 훅은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능이다.

 

 

 

 

😺 훅에도 규칙이 있다 ! 

 

📍 Hook 규칙

• 최상위 에서만 Hook을 호출해야 한다
  • 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 안된다.
  • 이 규칙을 따르면 컴포넌트가 렌더링될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장된다.
• 리액트 함수 컴포넌트에서만 Hook을 호출해야 한다.

 

 

 

 

 

😺  이제 훅 (hook) 이 어떻게 생겼는지 봐보자 !

기본 훅들은 꼭 알아두도록 하자 !

 

 

📍 훅 (hook) 종류

 

 

1. useState(초기값)

 

useState() : 배열반환 첫번째 배열의 요소에는 현재값을, 두번째 요소는 상태를 변경하는 (setter) 를 반환합니다.

const [data, setData] = useState('초기값')

 

 

2. userEffect(실행시킬 콜백함수, 값에 따른 렌더링 지정-배열)

함수형 컴포넌트에서 사이드 이펙트(side effects)를 처리하기 위해 사용되는 훅입니다.

사이드 이펙트란 컴포넌트의 렌더링 과정 외부에서 발생하는 작업

 

 

3. useRef(초기값)

특정 태그에 이름달기

 

 

4. useReducer(리듀서함수명, state값) 

외부에서 state사용하기

 

 

등등....

 

 

컴포넌트의 성능을 최적화 훅 .... 

• useMemo
• useCallback

 

 

---

 

2. 라이프 사이클  (클래스형 컴포넌트 기준) - userEffect

 

 

 

 

😺 라이프 사이클이 뭘까??

말 그대로 생명주기로 컴포넌트가 생성, 업데이트, 제거 되는 과정에서

특정 메서드들이 호출되는 시점을 말한다.

자 ! 생명 주기를 다루는 함수들을 알아보자.

 

 

 

 

 

 

😺 렌더링 이후에 실행시킬 작업이 있으면 아래함수를 사용합니다. (클래스형 컴포넌트 기준)

 

📍 컴포넌트, 라이프 사이클 (클래스형 ! )

 

1. componentDidMount : 컴포넌트가 마운트 됨, 즉 컴포넌트의 첫번째 렌더링이 마치면 호출되는 메서드
   

   componentDidMount() {
     console.log('Component has been mounted');
   }

   
   
   
2. componentDidUpdate : state의 변경, props의 변경 이후 실행되는 메서드
   

   componentDidUpdate(prevProps, prevState, snapshot) {
     console.log('Component has been updated');
   }

   
   
   
3. componentWillUnmount : 컴포넌트가 리렌더링 되기직전(언마운트) 시점에 실행되는 메서드
   

   componentWillUnmount() {
     console.log('Component will unmount');
   }

   
   
   
4. 이외에도 여러가지가 있습니다

 

 

 

 

---

 

 

😺 이때, 위에 설명한  componentDidMount  같은 친구들은 ` 클래스형 ` 에서만 사용된다.

`함수형` 도 알아보자 !!!! !!!! !!!! !!!! !!!!

 

📍userEffect(실행시킬 콜백함수, 값에 따른 렌더링 지정-배열 )

 

함수형 컴포넌트에서 사이드 이펙트(side effects)를 처리하기 위해 사용되는 훅입니다.

사이드 이펙트란 컴포넌트의 렌더링 과정 외부에서 발생하는 작업

 

1. userEffect의 첫번째 매개변수는 실행시킬 콜백함수
2. userEffect의 두번째 매개변수는 배열[]을 사용하여 특정값이 update 될 때만 실행시켜 줄 수 있습니다.
3. useEffect() 는 컴포넌트의 라이프 사이클을 다룹니다. 리액트 컴포넌트가 mount, mount이후, unmount때 마다 특정작업을 수행합니다.
4. useEffect() 는 여러개 일 수도 있습니다.
5. 렌더링(화면을 지웠다 다시생성) 은 아래와 같은 상황에 발생됩니다.

 

 

📍 컴포넌트, 라이프 사이클 (함수형! )

 

1. 컴포넌트가 마운트 됨, 즉 컴포넌트의 첫번째 렌더링이 마치면 호출되는 메서드

useEffect( () => {
	console.log(`렌더링완료`);
});

 

useEffect( () => {
	console.log(`처음만 실행됩니다`);
}, []);
//mount 이후 업데이트 될 때는 실행되지 않으려면, 두번째 매개변수 배열를 줍니다.

 

 

 

2. state의 변경, props의 변경 이후 실행되는 메서드

const HookEffect = () => {
    //useState
    const[name, setName] = useState('');
    const handleName = (e) => {
        setName( e.target.value );
    }

    //특정값이 업데이트 될 때만 실행해주려면 두번째 매개변수에 값을 state값을 지정합니다
    useEffect( () => {
        console.log(`name이 업데이트 시 실행됩니다`)
    }, [name]);

    return (
        <div>
            
            이름:<input type="text" onChange={handleName}/><br/>
            이름:{name}
        </div>
    )
}

export default HookEffect;

 

 

😺⛔ 주의 )  userEffect안에서 객체타입 state를 setState하는 경우 무한루프에 빠질 수 있다!

https://kinsta.com/knowledgebase/react-hook-useeffect-has-a-missing-dependency/

How To Fix the “React Hook useEffect Has a Missing Dependency” Error

 

 

3. unmount직전 - 컴포넌트가 화면에서 사라지기 직전에 호출됩니다.

const HookEffect = () => {
    //useState
    const[name, setName] = useState('');
    const handleName = (e) => {
        setName( e.target.value );
    }
    
	//useEffect    
    useEffect( () => {
        console.log(`name이 업데이트 시 실행됩니다`)
        
        //unmount이후 실행됩니다.
        return () => {
            console.log(`unmount에 실행됩니다.`);
        }
    }, [name]);

    return (
        <div>
            이름:<input type="text" onChange={handleName}/><br/>
            이름:{name}
        </div>
    )
}

export default HookEffect;

 

 

 

 

 

---

 

3. 특정 태그에 이름달기 - useRef()

 

 

😺  이벤트 사용하다보면 특정 태그에 접근해서 처리해야하는 경우가 생긴다.

 

무조건 state 로 관리되어야 접근 가능한데

state 로 제어 안되는 애들은 (다이렉트로) 들어가서 핸들링을 해준다.

이때 ref 를 사용하는 것이다.

 

ref = {} 로 다이렉트로 바로 접근해서 사용할 수 있다 :) 

 

 

 

📍 useRef() 훅 

 

useRef(초기값)

const 사용할이름 = useRef(null);

• 이벤트를 사용하다 보면 특정 태그에 접근해서 핸들링 하는 경우가 생깁니다.
• arrow function에 event 매개변수를 이용해서, 자신 태그에는 접근할 수 있지만, 다른 태그는 핸들링 하기가 어렵습니다.
• 이런경우 useRef() 훅을 이용해서 특정태그에 이름을 지정하고 핸들링 할 수 있습니다.
• useRef는 초기값을 객체로( {current:vlue} ) 저장하기때문에  변수명.current로 현재태그에 접근 할 수있습니다.

 

import { useRef } from "react";

function HookRef(){

  let input = useRef(null);

  let handleClick = () => {
    // 값변경은 state 로 관리해주는 것이고 (랜더링)
    //ref 는 특별한 상황에서만 강제변경 선호되지않음 (랜더링 일어나지 않음
    //console.log(input);
    //console.log(input.current); // 태그에 다이렉트 접근 가능
    console.log(input.current.type);
    console.log(input.current.value);

    input.current.focus();
  }

  return (

    <>
    <input type="text" ref={input}/>
    <button type="button" onClick={handleClick}> 등록 </button>    
    </>

  )

}

export default HookRef;

---

4. 외부에서 state사용하기 -  useReducer()

 

😺 state 를 외부에서 사용하고 싶을때에는 어떻게 해야할까?

useReducer() 훅을 사용하면 된다 !

 

 

 

 

📍 useReducer() 훅 

• useReducer는 state와 비슷합니다.
• useReducer는 외부에서 state를 관리할 수 있게 해줍니다.
• 리듀서함수를 외부로 export하게 되면 로직을 분리할 수 있습니다. (재사용이 가능해짐)
• 즉, 외부에서 state 관리할 수 있게 해준다. 재활용이 가능해진다.

 

const [현재값, 리듀서action함수] = useReducer(리듀서함수명, state값);

 

 

const 리듀서함수명 = (state값, 리듀서action함수로 전달하는 상태값) => {
	//초기값을 action 상태에 따라서 변경
	return state값
}

 

 

import { useReducer } from "react";

//컴포넌트 외부에 선언
//리듀서(상태제어)는 (현재state, 리듀서action함수로 전달하는 상태값) 를 받습니다.
const myReducer = (state, action) => {

    if(action.type === 'increase') {
        state = { value: state.value+1 }
    } else if(action.type === 'decrease') {
        state = { value: state.value-1 }
    } else if(action.type === 'reset'){
        state = { value : 0}
    } 

    return state
}

const HookReducer = () => {

    //state에서 만들었던 증가,감소 리듀서 적용하기
    //1. const[state값 , 리듀서실행함수] useReducer( 리듀서, state초기값)
    const [state, func] = useReducer(myReducer, {value:0 } )

    const handleIncrease = () => {
        func({type: 'increase'});
    }

    return (
        <div>
            <button type="button" onClick={ handleIncrease }>증가</button>
            <button type="button" onClick={ () => func({type: 'decrease'}) }>감소</button>
            <button type="button" onClick={ () => func({type: 'reset'}) }>초기화</button>
            <br/>
            현재카운트 {state.value}
        </div>
    )
}

export default HookReducer;

 

 

 

📍 useState와 useReducer의 비교

1. useState, useReducer 모두 상태를 관리하는 훅입니다.
2. useState는 관리할 상태가 간단할 때 일반적으로 사용하면 좋다. (쉽다)
3. 반면 관리할 상태가 여러개이고, 서로가 의존하고 있으며, 상태를 조작할 동작이 여러개일 때는 useReducer를 사용하는 것이 좋다. (어렵다)
4. 반드시 useReducer를 써야하는 것은 아닙니다. useState가 대체할 수 있게 때문입니다.

 

 

 

 

---

 

[App.js]

import HookEffect from "./hook/HookEffect.js";
import HookQ2 from "./hook/HookQ2.js";
import HookReducer from "./hook/HookReducer.js";
import HookReducer2 from "./hook/HookReducer2.js";
import HookRef from "./hook/HookRef.js";

function App(){
  return (
    <>
    <HookEffect />
    
    <hr />
    <HookRef />

    <hr />
    <HookReducer />

    <hr />
    <HookReducer2 />

    <hr/>
    <HookQ2 />
    </>
  )
}

export default App;

 

 

 

[HookEffect.js]

import {useEffect, useState} from 'react';

function HookEffect() {

  //useState훅
  const [data, setData] = useState('');
  const [age, setAge] = useState('');

  //useEffect훅 => 컴포넌트 라이프사이클 관리
  useEffect( () => {
    console.log('마운드 이후에 동작됨(렌더링 이후에 동작)');
  })

  // useEffect( () => {
  //   console.log('마운드 이후에 딱 한번만 실행됨(네트워크상으로 데이터를 가지고올때 사용함)');
  // }, []);

  // useEffect( () => {
  //   console.log('특정 값이 변경되서 렌더링 될때 동작됨(특정 state가 변경될때만 실행됨)');
  // }, [data, age]); 

  // useEffect( () => {
  //   console.log('effect실행됨~');
  //   return () => {
  //     console.log('unmount(소멸) 되기전에 실행됨');
  //   }
  // }, [data]); //data가 변경될때만.
  
  //useEffect는 여러개 일 수도 있습니다.
  // useEffect( () => {
  //   console.log('effect실행됨22222~~');
  // });


  //무한루프에 빠질 수 있는 코드
  // const [ex, setEx] = useState({name : '홍길동'});
  // useEffect( () => {
  //   let copy = {...ex};
  //   setEx(copy);
  // }, [ex]); 





  console.log('코드 실행됨..');

  return (
    <>
      <input type="text" value={data} onChange={ (e) => setData(e.target.value) } />
      <br />
      <input type="text" value={age} onChange={ (e) => setAge(e.target.value) }/>
      data : {data} ,  age : {age}

    </>
  )
}

export default HookEffect;

 

 

 

  useEffect( () => {
    console.log('마운드 이후에 동작됨(렌더링 이후에 동작)');
  })

 

---

 

  useEffect( () => {
    console.log('마운드 이후에 딱 한번만 실행됨(네트워크상으로 데이터를 가지고올때 사용함)');
  }, []);

 

 

 

  useEffect( () => {
    console.log('특정 값이 변경돼서 렌더링 될때 동작됨(특정 state가 변경될때만 실행됨)');
  }, [data]);

• data 값이 변경될때만 실행된다.

 

---

  useEffect( () => {
    console.log('effect실행됨~');
  });
  
   useEffect( () => {
    console.log('effect실행됨22222~~');
  });

•  useEffect 는 여러개 존재할 수 있다.

 

---

 

  //무한루프에 빠질 수 있는 코드
  const [ex, setEx] = useState({name : '홍길동'});
  useEffect( () => {
    let copy = {...ex};
    setEx(copy);
  }, [ex]);

• 해당 코드는 무한루프에 걸리게된다. 
• useEfftect() 는 ex 가 변경될때 마다 실행된다. => 하지만 setEx() 가 계속해서 실행되면서 ex 가 계속 바뀌므로 무한루프게 걸리게 된다.

 

---

 

useEffect(() => {
  let copy = { ...ex };
  
  // 상태가 실제로 변경된 경우에만 업데이트
  if (JSON.stringify(copy) !== JSON.stringify(ex)) {
    setEx(copy);
  }
}, [ex]);

• 이런 경우에는 위와 같이 조건문으로 처리해주는게 무한루프를 방지하는데 도움이 된다.

 

---

 

 

[HookRef.js]

import { useRef } from "react";

function HookRef(){

  let input = useRef(null);

  let handleClick = () => {
    // 값변경은 state 로 관리해주는 것이고 (랜더링)
    //ref 는 특별한 상황에서만 강제변경 선호되지않음 (랜더링 일어나지 않음
    //console.log(input);
    //console.log(input.current); // 태그에 다이렉트 접근 가능
    console.log(input.current.type);
    console.log(input.current.value);

    input.current.focus();
  }

  return (

    <>
    <input type="text" ref={input}/>
    <button type="button" onClick={handleClick}> 등록 </button>    
    </>

  )

}

export default HookRef;

 

 

  let input = useRef(null);

• useRef 를 통해 input 이라는 참조생성

 

console.log(input.current); // 태그에 다이렉트 접근 가능
console.log(input.current.type);
console.log(input.current.value);

• useRef 를 통해서 태그에 다이렉트한 접근이 가능하다.

 

 

---

 

[HookReducer.js]

 

import { useReducer } from "react";
import { myReducer } from "../util/MyReducer";

function HookReducer() {

  // // 리듀서 함수는 컴포넌트 외부에서 상태 값을 받아서 state 체인지 !!!!!!!!!!!!!!!!!!!!
  // const myReducer = (state, action) => {
  //   console.log(state);
  //   console.log(action);

   if (action === "handleIncrease"){
     state = {value : state.value + 1}; // state 를 밖에서 관리할 수 있게됨 
   }else if (action === "decrease") {
     state = {value : state.value - 1};
   }else if (action === "reset") {
     state = {value : 0};
   }
    

  //   return state;//반환되는 state 는 reducer 상태값으로 다시 반환됨
  // }; //state 값 , action (상태값)


  const handleIncrease = () => {
    actionFunc("handleIncrease"); // myReducer 함수로 action 들어감
  }

  //const result = useReduce(myReducer,{value: 0} ); //리듀서 함수 ,초기값
  // 반환, state 값, reducer함수의 상태를 바꿀 수 있는 action 함수
  const [state, actionFunc] = useReducer(myReducer,{value: 0} ); //리듀서 함수 ,초기값
  //console.log(result);

  return (

  <>

    <h3> useReducer</h3>
    
    리듀서로 관리되는 state 값 {state.value}

    <button type="button" onClick={handleIncrease} > 증가 </button>
    <button type="button" onClick={() => actionFunc("decrease")} > 감소 </button>
    <button type="button" onClick={() => actionFunc("reset")} > 초기화 </button>
  </>

  )
}

export default HookReducer;

 

 

 

const myReducer = (state, action) => {
console.log(state);
console.log(action);

return state;//반환되는 state 는 reducer 상태값으로 다시 반환됨
}; //state 값 , action (상태값)

//----------
   
const [state, actionFunc] = useReducer(myReducer,{value: 0} ); //리듀서 함수 ,초기값
 
 
 //----------
<h3> useReducer </h3>
리듀서로 관리되는 state 값 {state.value}

• myReducer 상태 관리를 위해 사용되는 훅으로 위와 같이 state, aciton 객체를 가진다.
• 첫번째 매개변수 : 리듀서 함수로, 상태를 업데이트하는 로직이다! (state 값은 다시 reducer 상태 값으로 반환됨)

 

• state: 현재 상태 객체
• action: 상태를 어떻게 변경할지에 대한 정보를 담고 있는 객체

 

---

 

리듀서로 관리되는 state 값 {state.value}
<button type="button" onClick={handleIncrease} > 증가 </button>
<button type="button" onClick={() => actionFunc("decrease")} > 감소 </button>
<button type="button" onClick={() => actionFunc("reset")} > 초기화 </button>

• 버튼을 누르면 value 값이 변경되게 할 것 이다.!

 

  const handleIncrease = () => {
    actionFunc("handleIncrease"); // myReducer 함수로 action 들어감
  }
  
//onClick={() => actionFunc("decrease")}
  // 요거랑 같다
  
  
    
const [state, actionFunc] = useReducer(myReducer,{value: 0} ); //리듀서 함수 ,초기값
// actionFunc 로 들어가게된다

• actionFunc 은  handleIncrease or decrease 와 같은 상태 값을 받는다.

 

 

  // 리듀서 함수는 컴포넌트 외부에서 상태 값을 받아서 state 체인지 !!!!!!!!!!!!!!!!!!!!
  const myReducer = (state, action) => {
    console.log(state);
    console.log(action);

    if (action === "handleIncrease"){
      state = {value : state.value + 1}; // state 를 밖에서 관리할 수 있게됨 
    }else if (action === "decrease") {
      state = {value : state.value - 1};
    }else if (action === "reset") {
      state = {value : 0};
    }

    return state;//반환되는 state 는 reducer 상태값으로 다시 반환됨
  }; //state 값 , action (상태값)

• 받아온 상태값을 비교해서 state 값을 변경시켜준다.
• 이후 state 값을 다시 반환시켜준다 !

 

 

---

[HookReducer2.js]

import { useReducer } from "react";

function HookReducer2(){


  const nameReducer = (state, action) => {
    //action에 전달되는 값을 엘리먼트
   state = {...state, [action.name] : action.value};
    return state;
  }


  const [state, action] = useReducer(nameReducer,{name:'', age: 0} ); //리듀서 함수 ,초기값

  return (
    <>

    <input type="text" name="name" value={state.name} onChange={(e)=>action(e.target)}/>
    <input type="number" name="age" value={state.age} onChange={(e)=>action(e.target)}/>

    리듀서를 통해섭 변경된 값 : {state.name} {state.age}

    </>
  )
}
export default HookReducer2;

 

 

  const [state, action] = useReducer(nameReducer,{name:'', age: 0} ); //리듀서 함수 ,초기값

• 리듀서함수와 초기값을 지정해준다. (state 와 action 으로 반환된다)
• 즉 name 은 빈값 , age 는 0 이 초기값으로 설정된다.

 

    const nameReducer = (state, action) => {
    //action에 전달되는 값을 엘리먼트
   state = {...state, [action.name] : action.value};
    return state;
  }

• state 값을 복사해와서, action.name 의 값만 변경해주고 state 를 반환시키면
• 다시 name 과 age 값이 초기값으로 설정된다.

 

 

---

 

[HookQ2.js]

import { useReducer, useRef, useState } from "react";

const HookQ2 = () => {

const [data, setData] = useState({todo:'', list : []});

const handleTodo = (e) => {
  setData({...data, ["todo"] : e.target.value})
}


//ref
let input = useRef(null);

let handleClick = () => {
  let newList = data.list;
  newList.push(data.todo);
  setData({todo: '', list : newList});
  
  input.current.focus();
}

return (

  <div>
    <input type="text" name="todo" placeholder="할일 목록 작성" ref={input} value={data.todo} onChange={handleTodo}/>
    <button type="button" onClick={handleClick}> 등록 </button>
    <ul> 
      {
      data.list.map((item,index) => <li key="index"> {index+1}. {item} </li>)
      }
    </ul>

  </div>

)


}

export default HookQ2;

 

 

 

const [data, setData] = useState({todo:'', list : []});

const handleTodo = (e) => {
  setData({...data, ["todo"] : e.target.value})
}

• todo, list 객체 생성, 상태관리!
• handleTodo 가 실행되면 , todo 값이 input 값으로 업데이트 된다.

 

 

 

<input type="text" name="todo" placeholder="할일 목록 작성" ref={input} value={data.todo} onChange={handleTodo}/>
<button type="button" onClick={handleClick}> 등록 </button>
<ul> 
  {
  data.list.map((item,index) => <li key="index"> {index+1}. {item} </li>)
  }
</ul>

 

• ref 는 useRef 를 통해 input 에 포커스를 맞춰주기 위함이다.

 

 

let input = useRef(null);

let handleClick = () => {
  let newList = data.list;
  newList.push(data.todo);
  setData({todo: '', list : newList});
  
  input.current.focus();
}

• handClick 이 작동하면 newList에 todo 를 추가하고 setData 로 list 를 newList로 업데이트 시켜준다.
• input.current.focus(); 로 input 에 포커스를 맞춰준다.

 

---