리액트 딥 다이브 useEffect 동작원리

 

이번에 블로그로 작성 할 주제는 은근 헷갈리는 useEffect의 동작원리이다. 저번에도 한번 useEffect의 동작원리를 정리해봤는데 이번에는 코드의 실행순서를 통해 제대로 파악해보고자 한다.

 

useEffect의 사전적 개념은 컴포넌트가 렌더링 된 이후에 어떠한 부수 효과를 일으키고 싶을때 사용하는 훅이다.

 

 

저번 블로그에도 작성했던 핵심 원리 2가지가 있는데 다시 머리에 숙지하자

1. useEffect는 렌더링 / 리렌더링이 선행 되어야한다.
2. 1번 조건이 부합됐다면 의존성 배열 값이 달라졌는지를 판단 할 수있는 자격요건이 있다는 것을 의미한다. 그리고 의존생 배열 값이 바뀌면 useEffect의 콜백함수는 재 실행 된다.

 

 

의존성 배열의 이전 값과 현재 값의 비교는 Object.is 기반의 얕은 비교를 통해 이루어진다. 이전 값과 현재 값에 하나라도 변경 사항이 있다면 callback으로 선언 한 부수 효과를 실행한다. 

export default function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('useEffect 실행');

    const intervalId = setInterval(() => {
      console.log('인터벌 동작중');
      setCount((prev) => prev + 1);
    }, 1000);

    return () => {
      console.log('클린업 실행');
      clearInterval(intervalId);
    };
  }, [count]);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(1)}>버튼 클릭</button>
    </div>
  );
}

 

useEffect, setInterval 로직이 담겨 있는 코드이다. 일단 count가 0 일때 useEffect가 실행되고 처음에 console.log("useEffect 실행")이 찍힌다. 이후 setInterval이 설정되고 1초마다 setCount가 발동되어 +1씩 상태가 업데이트 된다. 이때 '인터벌 동작중'이라는 콘솔 또한 출력된다. 이후 클린업 함수가 발동되게 되는데 count가 1인 상태로 리렌더링 되기전에 이전 인터벌을 제거 해준다. 이전 인터벌을 제거하고 다시 useEffect가 실행되며 console.log('useEffect 실행')이 찍힌다. 그리고 다시 새로운 인터벌이 생긴다. 

 

 

리액트 딥다이브 교재에 서술되어 있는 클린업 함수의 개념은 다음과 같다.

클린업 함수는 함수 컴포넌트가 리렌더링 됐을 때 이전의 값을 기준으로 실행되는, 즉. 이전 상태를 청소해주는 개념으로 볼 수 있다.

 

 

이전에 작성했던 블로그도 참고하기를 원한다면 해당 링크를 통해서 들어가보면 좋을 것 같다.

 

https://no2jfamily.tistory.com/119

useEffect 동작원리 핵심정리 및 면접준비