이 글은 Dan Abramov가 작성한 'A Complete Guide to useEffect' 번역문을 리마인드 타이핑한 문서이다.

useEffect를 잘 쓰다가도 쓸 때마다 뭔가 잘 들어맞지 않는다. 뭔가 놓치고 있다는 기분을 느끼며 괴로움을 느끼기도 한다. 처음에는 클래스 컴포넌트의 라이프사이클 메서드와 비슷하다고 느끼지만.. 점점 시간이 지나면서 스스로에게 아래와 같은 질문을 한다.

• useEffect로 componentDidMount 동작을 흉내내려면 어떻게 하지?
• useEffect 안에서 데이터 패칭(Data fetching)은 어떻게 해야할까? 두번째 인자로 오는 배열([])은 뭐지?
• 이펙트를 일으키는 의존성 배열에 함수를 명시해도 되는걸까?
• 왜 가끔씩 데이터 페칭이 무한루프에 빠지는걸까?
• 왜 가끔씩 effect 안에서 이전 state나 prop 값을 참조할까?

useEffect 훅을 클래스 컴포넌트의 라이프사이클이라는 익숙한 프리즘을 통해 바라보는 것을 그만두자 모든것이 명백하게 다가왔다.

모든 렌더링은 고유의 Prop과 State가 있다

이펙트에 대해 이야기하기 전에, 먼저 렌더링에 대해 이야기 해야 한다.

아래 카운터 컴포넌트가 있다. 하이라이트된 라인을 보자.

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      ***<p>You clicked {count} times</p>***
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

무슨 뜻일까? count가 어찌저찌 state의 변화를 관찰하여 자동으로 업데이트 한다는걸까? 처음에 리액트를 배우면서 직관적으로 받아들일 때는 유용한 생각일 수 있지만 정확한 멘탈 모델은 아니다.

이 예제에서 count는 그저 숫자이다. 마법의 "데이터 바인딩"이나 "워쳐"나 "프록시", 혹은 비슷한 그 무엇도 아니다. 그냥 아래와 같이 단순한 숫자에 불과하다.

const count = 42;
// ...
<p>You clicked {count} times</p>
// ...

처음으로 컴포넌트가 렌더링될 때, useState로부터 가져온 count 변수는 0이다. setCount(1)을 호출하면, 다시 컴포넌트를 호출하고, 이 때 count는 1이 되는 식이다.