useEffect 활용

이 글은 React 공식 문서를 학습하며 정리하였습니다.

 

React에서 useEffect는 useState로 선언한 상태 값이 변경될 때마다 호출되는 함수로, obserber 패턴으로 볼 수 있다.

 

useEffect는 아래와 같은 명세를 가지는데

useEffect(effect, dependencies)

리액트 팀에서는 useEffect를 이렇게 설명하고 있다.

 

you tell React that your component needs to do something after render. React will remember the function you passed (we’ll refer to it as our “effect”), and call it later after performing the DOM updates.

 

핵심은 넘겨준 effect 콜백 함수가 DOM이 업데이트, 즉 리렌더링된 후에 호출된다는 것이다.

이는 class 기반에서 react의 lifecycle 함수 중 componentDidMount, componentDidUpdate의 역할과 거의 같다.

 

그렇다면 컴포넌트가 unmount 될 때 설정 상태를 초기화하는 등의 cleanup은 어떻게 할 수 있을까?

class 기반에서는 componentWillUnmount 함수를 사용했었다.

Hooks 방식에서는 useEffect의 return 함수가 componentWillUnmount처럼 동작한다.

  useEffect(() => {
    subscribe();
    
    return () => {
      unsubscribe();
    };
  });

 

useEffect는 기본적으로 리렌더링 후 항상 호출된다. 이는 때때로 성능에 안 좋은 영향을 미칠 수 있다.

class 기반에서는 prevProps와 prevState의 명시적인 비교를 통해 콜백 함수의 실행을 막았었다.

componentDidUpdate(prevProps, prevState) {
  if (prevState.count !== this.state.count) {
    document.title = `You clicked ${this.state.count} times`;
  }
}

 

useEffect에서는 해당 처리를 위해 optional 한 두 번째 인수를 받도록 설계했으며

넘겨준 상태 값이 변경된 경우에만 effect가 동작한다.

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Only re-run the effect if count changes

 

useEffect 사용에서 두 번째 파라미터를 활용한 최적화 시 주의 사항은 다음과 같다.

• dependencies 배열의 모든 값은 컴포넌트 scope(props, state) 안에 있어야 하며, effect에서 사용되어야 한다. 그렇지 않으면 이전 render의 탁한 값(stale values)을 참조할 가능성이 있다.
• effect와 cleanup 을 한 번씩만 호출하고 싶다면(각각 mount, unmont 시점에), dependencies로 빈 배열을 넘겨주면 된다. 이는 React에게 해당 effect가 컴포넌트 scope 내 어떤 상태에도 의존하지 않는다는 것을 알려주는 것이다.
  이때 effect에서는 항상 props, state의 초기값을 가진다.