React의 Life Cycle 이해 - Hooks

Hooks 

- React life cycle을 이해하기 위해 알아야 함.

- 종류

    - useState 

    - useEffect

    - useCallback

    - useMemo, useContext, useRef, useLayoutEffect

useState

/**
   * useState: 상태 값과 그 값을 갱신하는 함수를 반환
   * - 인자: 초기 상태 값
   * - 반환: [상태 변수, 상태에 대한 Setter]
   */
  const [value, setValue] = useState(0);

useEffect

/**
 * useEffect: 컴포넌트가 렌더링 될 때, 특정 작업을 실행
   * - 인자
   *   - 실행하고자 하는 함수 (effect callback)
   *     - effect는 정리(clean-up) 함수를 반환할 수 있음
   *     - 반환된 함수는 컴포넌트가 언마운트 또는 effect 재실행 이전에 실행됨
   *   - 의존성 배열 (dependency list)
   */
  useEffect(() => {
    console.log("[Function] useEffect []: 컴포넌트가 마운트 될 때, 한 번만!");

	//마운트가 됐을 때! eventListener를 넣기 (밖에 두면 이벤트가 중복돼서 만들어짐)
    //document.body.addEventListener('click', ()=>{console.log('click body');});
    
    //언마운트가 됐을 때 남아있는 리소스를 제거해야 이벤트가 발생하는 문제를 해결할 수 있음!!
    const eventHandler = () => {console.log('click body')};
    document.body.addEventListener('click', eventHandler);
    
    return () => {  //cleanup함수라고 함.
      console.log("[Function] useEffect return []: 컴포넌트가 언마운트 될 때,");
      document.body.removeEventListener('click', eventHandler); 
    };
  }, []);
  
  
  useEffect(() => {
    console.log(
      "[Function] useEffect [value]: 컴포넌트가 마운트 될 때, + value가 변경되면,"
    );

    return () => { //cleanup함수라고 함.
      console.log(
        "[Function] useEffect return [value]: 새로 useEffect를 수행하기 전에,"
      );
    };
  }, [value]); //두번째 인자에 이렇게 넣고, value가 변경될 때 실행하도록할 수 있음
  
  //value가 변경되고 -> 다시 랜더링되면서 컴포넌트의 첫줄부터 시작 -> useEffect return(cleanup함수) -> 
  //useEffect의 첫줄 실행되는 순으로 진행됨.

 

useCallback

- 성능을 위해서 

/**
   * useCallback: 메모이제이션된 콜백을 반환
   * - 인자
   *   - 메모이제이션 할 함수
   *   - 의존성 배열
   * - 반환: 메모이제이션 된 함수
   * *의존성 배열을 제대로 셋팅하지 않으면 함수 안에서 사용되는 값이 업데이트 되지 않은 값일 수 있음
   */
   
   
  //[비교] useCallback 없이 사용할 때, 리랜더링될 때마다 아래 함수를 계속 만들어줌 ... 가비지컬랙터가 작동된다고 해도 중복해서 만드는 것은 성능에 좋지 않다.
  const increaseValue = () => {setValue(value+1);};
  //[비교] useCallback, 처음에 랜더링됐을 때 한번 만들어놨으면 두번째 랜더링에 와서 기존에 있던 걸 기억해서 재활용하는 식으로 동작
  const increaseValue = useCallback(
    () => {setValue(value + 1);}, [value] //value 값이 변할 때, 함수 만들도록 함. value가 없다면 1.. (처음 value값이 0일 때.. 계속 재활용하면 1로 세팅) 
  );
  //사실 위 상황은 useCallback이 필요한 상황이 아님. (예시를 위한 것일 뿐)
  const resetValue = useCallback(() => { setValue(0); }); //value와 같은 디펜던시가 없음. 처음 만든 함수를 계속 재활용해도 된다는 소리임.
  

  return (
    <div>
      <h1>value: {value}</h1>
      <button onClick={increaseValue}>Increase value</button>
    </div>
  );

 

Hooks를 사용할 때 주의사항
- 조건문 안에 사용해서는 안 된다.
- React 컴포넌트에서만 사이클 관리를 위해 쓰이는 것이기 때문에 함수 안에 사용해서도 안 된다.

 

React 랜더링 과정

클래스형 컴포넌트의 Life Cycle

함수형 컴포넌트의 Life Cycle