useEffect란?

1
useEffect(setup, dependencies?)

외부 시스템과 컴포넌트를 동기화 하는데 사용하는 React Hook이다. 즉, 외부 시스템과 동기화하는 작업이 아니라면 useEffect를 사용하지 않는 것이 좋다.

params

setup

Effect 로직 함수로, 선택적으로 cleanup 함수를 반환할 수 있다.

  • 컴포넌트가 처음 DOM에 추가 되었을 때, setup 함수가 실행된다.
  • 의존성이 변경되어 리렌더링이 발생한 이후, 리액트는 이전 값으로 cleanup 함수 먼저 실행하고 새로운 값으로 setup 함수를 실행한다.
  • 컴포넌트가 DOM에서 제거된 후, 리액트는 클린업 함수를 한 번 실행한다.

dependencies?

setup 함수 코드 내부와 관련된 리액트 값들의 리스트이다. 리액트 값들은 컴포넌트 내부에서 선언된 props, state, 변수, 함수들을 의미한다.

  • 리액트는 이전 값과 dependencies를 Object.is() 메서드로 비교한다.
  • 만약 dependencies를 명확히 기재하지 않는다면, 컴포넌트 리렌더링이 발생할 때마다 Effect가 다시 실행된다.

이전 상태를 기반으로 useEffect로 상태 업데이트 하기

1
2
3
4
5
6
7
// slider.js - 의존성 있는 경우
useEffect(() => {
  const interval = setInterval(() => {
    setIndex(index + 1);
  }, 3000);
  return () => clearInterval(interval);
}, [index]);

위 코드는 slider 프로젝트를 제작하다가 나온 코드이다. setInterval을 Effect 로직에 사용하였는데, 의존성으로 indexrk 있어 index가 변경될 때마다 해당 Effect 로직이 cleanup되고 setup되고를 반복하게 된다.

1
2
3
4
5
6
7
// slieder.js - 의존성 빈 배열인 경우
useEffect(() => {
  const interval = setInterval(() => {
    setIndex((i) => i + 1);
  }, 3000);
  return () => clearInterval(interval);
}, []);

위와 같이 바꿀 경우 코드는 동일하게 동작하지만, 이전 상태를 기반으로 상태를 업데이트할 때에는 이전 값을 직접 넣어주기보단 updater 함수를 콜백함수로 전달해줌으로서 의존성 데이터를 줄일 수 있다.

그 결과, 처음 컴포넌트가 렌더링되고 한번만 실행되기 때문에 불필요한 setup과 cleanup 과정을 줄일 수 있다.