useEffect 완벽가이드 정독하기1

프로젝트를 진행하면서 useEffect에 대한 개념적인 정리가 필요하다고 느꼈다. 그러던 중 Dan Abramov가 작성한 'A Complete Guide to useEffect'를 번역한 글을 찾았고 프로젝트가 끝나면 정독해보자고 다짐했다.

[번역] useEffect 완벽 가이드

오늘부터 조금씩이라도 꼼꼼이 읽어보면서 정리하고자 한다.

useEffect를 완전히 이해하기 위해서는,
useEffect 훅을 클래스 컴포넌트의 라이프 사이클이라는 익숙한 프리즘을 통해 바라보는 것을 그만둬야 한다.

모든 랜더링은 고유의 Props와 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를 업데이트할 때마다, 컴포넌트를 호출한다.
setCount를 호출할 때, 리액트는 달라진 count값과 함께 컴포넌트를 다시 호출한다. 그러면 리액트는 최신화된 랜더링 결과물과 일치하도록 DOM을 업데이트한다.
명심할 점은 랜더링 후 그 안의 count 상수는 시간이 지난다고 바뀌는 것이 아니라는 점이다. 컴포넌트가 다시 호출되고, 각각의 랜더링마다 격리된 고유의 count값을 보는 것이다.

모든 랜더링은 고유의 이벤트 핸들러를 가진다.

function Counter() {
  const [count, setCount] = useState(0);
  function handleAlertClick() {
    setTimeout(() => {
      alert('You clicked on: ' + count);
    }, 3000);
  }
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
      <button onClick={handleAlertClick}>
        Show alert
      </button>
    </div>
  );
}

아래의 순서로 실행해보면 alert에 어떤 값이 출력될까?

1. 카운터를 3으로 증가시킨다
2. “Show alert” 을 누른다
3. 타임아웃이 실행되기 전에 카운터를 5로 증가시킨다
   
   alert 등장할 때의 값인 5가 나올까? 아니면 “Show alert” 버튼을 클릭할 당시의 값인 3이 나올까?
   정답은 3.

그렇다면 왜이렇게 동작할까?
count 값은 매번 별개의 함수 호출마다 존재하는 상수값이라는 이야기를 했다.
즉, 함수(함수형 컴포넌트)는 랜더링될때마다 여러번 호출되지만, 각각의 랜더링에서 함수 안의 count값은 상수이자 독립적인 값(특정 랜더링 시의 상태)으로 존재한다.
즉 이벤트 핸들러가 실행되었을때 이벤트핸들러는 랜더링될 때의 count값을 잡아둔다.(본다.)
따라서 각각의 랜더링은 고유한 버전의 handleAlertClick을 리턴하며 각각의 버전은 고유의 count를 기억한다.

특정 랜더링 시 그 내부에서 props와 state는 영원히 같은 상태로 유지된다.
props와 state가 랜더링으로부터 분리되어 있다면, 이를 사용하는 어떠한 값(이벤트 핸들러를 포함하여)도 분리되어 있는 것이다.
이들도 마찬가지로 특정 랜더링에 “속해 있다”. 따라서 이벤트 핸들러 내부의 비동기 함수라 할지라도 같은 count 값을 “보게” 될 것이다.