230828 개발일지 TIL - React Hooks : useEffect 실행 순서

useEffect

React 컴포넌트에서 사이드 이펙트를 수행하는 데 사용된다. 사이드 이펙트란 데이터 가져오기, 구독 설정하기, 수동으로 React 컴포넌트의 DOM을 변경하는 것 등을 말한다.

실행 시점
컴포넌트 마운팅 후: 컴포넌트가 처음 DOM에 삽입되면 useEffect 내부의 함수가 호출된다.
컴포넌트 업데이트 후: 상태나 속성이 변경될 때마다 해당 함수가 재호출된다.

의존성 배열(Dependency Array)
의존성 배열(dependency array)을 활용하여 필요에 따라 특정 상태나 속성 변화에만 반응하도록 제어할 수 있다. 예를 들어, state를 의존성 배열로 전달하면 state 값이 변경될 때만 함수가 재실행된다.

useEffect(() => {
	// state과 관련된 작업을 수행
}, [state]);

클린업 함수(Cleanup Function)
useEffect 내부에서 반환하는 클린업 함수는 다음 효과(effect) 시작 전 또는 컴포넌트 언마운팅 전에 호출된다. 이를 통해 필요한 정리 작업을 수행할 수 있다.

useEffect(() => {
  // state과 관련된 작업을 수행

  return () => {
    // Clean up 정리 작업을 수행
      };
}, [state]); // 의존성 배열에 state를 지정하여 state 값이 변경될 때만 함수가 재실행되게 한다.

useEffect 실행 순서 정리

1. 컴포넌트가 처음 마운트 되면(화면을 처음 그리면) useEffect 내부의 함수가 실행된다.
2. 컴포넌트의 상태나 속성이 변경될 때마다(화면에 변화가 있을 때마다) 해당 함수가 재실행된다.
3. useEffect에 전달된 의존성 배열에 따라 특정 상태나 속성 변화에만 반응하게 할 수 있다.
4. useEffect 내부에서 반환하는 cleanup함수(끝마치는 일)를 정의하면 다음 useEffect의 시작 전이나 화면에서 사라질 때 cleanup이 일어난다.