리액트 useEffect 제대로 이해하고 똑똑하게 사용하기 - useEffect의 정의

 

useEffect는 매일 사용하는 Hooks 중 하나이고, 동작 방식을 어느 정도 이해하고 있다고 생각하지만
제대로 알고 있다고 말하기에는 마음에 걸리는 것들이 많은 Hook 이기에, 제대로 정리해보고자 한다. 

 

모던 리액트 Deep Dive 에서는 useEffect의 정확한 정의를 아래와 같이 말한다. 

 

useEffect는 애플리케이션 내 컴포넌트의 여러 값들을 활용해 동기적으로 부수 효과를 만드는 메커니즘이다.

 

우리가 일반적으로 이야기 하는 useEffect의 특징, 즉 의존성 배열이 변경되면 콜백함수를 실행한다, 의존성 배열이 빈 배열인 경우 컴포넌트가 마운트 될 때 실행되고, useEffect가 반환하는 클린업 함수는 컴포넌트가 언마운트 될 때 실행된다 등의 특징들을 한 문장으로 설명하려면, 결국 컴포넌트의 값들을 활용해서 '동기적인 부수효과' 를 낸다고 말할 수 있는 것이다. 

 

 

이 동기적인 부수효과라는 게 과연 무엇일지 차근차근 알아보도록 하자. 

 

useEffect의 기본 형태

useEffect(콜백함수, [의존성 배열])

 

useEffect는 일반적으로 위의 형태를 가지고 있다.  두번째 인수인 의존성 배열은 빈 배열일 수도, 여러 값을 가진 배열일 수도 있다. 배열 자체가 생략될 수도 있다. 

 

의존성 배열에 값이 있는 경우, 의존성 배열이 변경될 때마다 useEffect의 첫번째 인수인 콜백함수가 실행된다.
useEffect는 렌더링할때마다 의존성 배열에 있는 값을 보면서 이전과 달라진 값이 있는지를 확인한다. 이때 이전과 달라진 값이 있다면, 콜백함수를 실행시켜서 어떤 부수효과를 만들어내는 것이다. 

 

코드를 통해서 천천히 이해해보자. 아래 코드에서는 button 이 한 번 클릭될 때마다 state가 변경되어 리렌더링이 일어날 것이다. 

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

  function onClick() {
    setCount((prev) => prev + 1);
  }

  return (
      <TestBox>
        <h1>count: {count}</h1>
        <button onClick={onClick}> Click Me! </button>
      </TestBox>
  );
}

 

함수형 컴포넌트는 매번 함수를 다시 실행하여 리렌더링되기 때문에, 리렌더링 될 때의 위 컴포넌트는 사실상 아래의 함수와 같다고 볼 수 있다. (count 값이 1로 변경된 후 UseEffectStudy 함수를 재 실행했을 때의 결과) 

export default function UseEffectStudy({}) {
  const count = 1;
  return (
      <TestBox>
        <h1>count: {count}</h1>
        <button onClick={onClick}> Click Me! </button>
      </TestBox>
  );
}

 

한 번 더 버튼을 클릭하여 리렌더링이 발생했을 때 UseEffectStudy 컴포넌트는 아래와 같을 것이다.

export default function UseEffectStudy({}) {
  const count = 2;
  return (
      <TestBox>
        <h1>count: {count}</h1>
        <button onClick={onClick}> Click Me! </button>
      </TestBox>
  );
}

 

즉, 함수형 컴포넌트는 렌더링 시마다 함수가 재실행되고, 그때마다 자신만의 state와 props 값을 갖게 된다.  만약 아래와 같이 이 컴포넌트 내부에 useEffect 가 사용되었다면, 이 useEffect는 count값을 매번 확인할 수 있었을 것이다. 즉, useEffect에서 의존성 배열에 있는 값이 달라졌는지를 확인할 수 있는 것이다. 

export default function UseEffectStudy({}) {
  const count = 2;
  
  useEffect( ()=> {
    // useEffect는 매 렌더링 시마다 count 값을 확인할 수 있다
  });
  
  return (
      <TestBox>
        <h1>count: {count}</h1>
        <button onClick={onClick}> Click Me! </button>
      </TestBox>
  );
}

 

 

위의 내용을 정리해보면 결국

useEffect는 컴포넌트의 여러 값(state 나 props)의 변화를 통해서

콜백 함수를 실행시켜 다른 부수효과를 만드는 Hook

이라고 볼 수 있다. 

 

 

이어서 React의 클린업 함수에 대해서 정리해보려고 한다.  끝.