리액트 컴포넌트의 라이프사이클과 useEffect

상태 전이는 그 상태 전이의 발생을 알리는 방식의 설계로 무궁무진한 응용 가능성을 갖고 있다.
그렇기 위에 꼭 알아둬야 하는 리액트 컴포넌트의 생명주기와, 이를 활용할 useEffect에 대해 알아보자.

리액트의 컴포넌트의 생명주기

• Mount
  • 컴포넌트가 탄생하는 순간.
  • 화면에 처음으로 렌더링되는 순간.
• Update
  • 컴포넌트가 리렌더링 되는 순간.
• UnMount
  • 컴포넌트가 화면에서 사라지는 순간.
  • 컴포넌트가 렌더링에서 제외되는 순간.

useEffect

• 리액트에선 각 생명주기 별로 명령을 지정해둘 수 있다.
• 이를 라이프사이클 제어 라고 하며, useEffect() 훅을 통해 구현할 수 있다.
• 리액트 컴포넌트의 사이드 이펙트를 제어하는 리액트 훅.
• 사이드 이팩트
• 컴포넌트의 동작에 따라 파생되는 여러 효과 (생명주기 제어 등)

useEffect의 구조

useEffect(() => {
    first

    return () => {
      second
    }
  }, [third])

• (콜백함수, 포커싱할 값들 모은 배열→의존성 배열(deps)) 을 매개변수로 갖는다.
• 포커싱한 값이 바뀔때마다 콜백함수가 수행되게 된다.
• 콜백함수는 실행할 알고리즘(first) 과 리턴 함수(second) 로 나뉘며,
  • first 부분은 deps 의 값이 변경되었을 때 수행하는 부분을 작성하고,
  • second 부분은 클린업 함수 로, 해당 효과가 다음으로 실행되기 전에 이전 효과를 정리하는 부분을 작성한다.

useEffect 사용 예시

• setState 함수는 비동기 로 동작하기에, State값을 컴포넌트 내에서 내부적으로 사용할 땐 useEffect를 사용하는 것이 좋다.
  • React는 성능 최적화를 위해 여러 개의 setState 호출을 일괄 처리(batch) 한다.
  • 즉, setState를 호출하면 그 즉시 state가 변하는 게 아니라, React가 다음 렌더링 사이클에 반영하도록 예약한다.
• deps 가 비어있을 때
  • first : Mount 를 제어하는 생명주기 제어함수로 동작한다.
  • second(클린업) : unMount를 제어하는 생명주기 제어함수로 동작한다.
• deps 에 원소가 존재할 떄
  • first : 의존성 값이 변화했을 때 처리하는 함수로 동작한다.
  • second(클린업) : 의존성 값이 변화하기 직전에 처리하는 함수로 동작한다.