useEffect를 컴포넌트 안에서 불러내는 이유?

useEffect를 컴포넌트 내부에 두어서 컴포넌트 내의 state, props를 접근할 수 있기 때문입니다. 가장 최신의 state, props를 바로 접근하기 위함으로 판단합니다.

function Example() {
  const [count, setCount] = useState(0);

  useEffect(*() =>* *{
    document.title = `You clicked ${count} times`;
  }*, []);
}

useEffect hokk에 함수를 전달하는데 이 함수를 기억하고 있다가 DOM을 업데이트한 이후에 매번 실행합니다.

다음 effect를 실행하기 전, 이전 렌더링에서 파생된 effect 또한 정리하는 이유

버그 방지, 성능 저하시 effect 건너뛰기등의 이유가 있습니다.

먼저 버그 방지입니다.

props의 count를 이용한다고 가정합니다.

1. 리액트가 { count: 20 } 을 가지고 UI를 렌더링합니다.
2. 브라우저가 실제로 그립니다. 화면 상에서 { count: 20 } 이 반영된 UI를 확인할 수 있습니다.
3. 리액트는 { count: 10} 에 대한 effect를 cleanup합니다.
4. 리액트가 { count: 20 } 에 대한 effect를 실행합니다.

만약에 3번이 없다고 가정해봅시다.

2번에서 화면에 표시되는 도중에 count가 변한다면 어떻게 될까요? 다른 count값을 렌더링하려고 할것입니다(1번). 그런데 그 값이 4번의 값과 다를것입니다.

ChatAPI.subscribeToFriendStatus(10, handleStatusChange);     // 첫번째 effect가 작동합니다.

ChatAPI.unsubscribeFromFriendStatus(10, handleStatusChange); // 이전의 effect를 정리(clean-up)합니다.
ChatAPI.subscribeToFriendStatus(20, handleStatusChange);     // 다음 effect가 작동합니다.

ChatAPI.unsubscribeFromFriendStatus(20, handleStatusChange); // 이전의 effect를 정리(clean-up)합니다.
// 다음 effect가 작동합니다.