<aside> 🔍 Effect hook을 사용하면 함수형 컴포넌트에서 Side Effect 를 수행할 수 있다.

</aside>

useEffect가 하는 일

useEffect를 이용하여 우리는 React에게 컴포넌트가 렌더링 수행을 완료한 뒤 어떤 일을 수행해야하는지 지정해줄 수 있다. React는 우리가 useEffect의 콜백으로 넘긴 함수를 기억했다가 DOM 업데이트를 수행한 이후에 호출한다.

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

useEffect를 컴포넌트 내부에 둠으로써 effect를 통해 컴포넌트의 state 혹은 props에 접근할 수 있다. 함수 범위 안에 존재하기 때문에 특별한 API 없이도 값을 얻을 수 있다.

useEffect의 clean-up

• 외부 데이터에 구독을 설정해야 하는 경우 메모리 누수가 발생하지 않도록 정리(clean-up)하는 것이 매우 중요하다.
• effect는 렌더링이 실행될 때마다 실행되므로, 다음 차례의 effect를 실행하기 전에 이전의 렌더링에서 파생된 effect를 정리해야한다.

import React, { useState, useEffect } from 'react';

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    // effect 이후에 어떻게 정리(clean-up)할 것인지 표시합니다.
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

Effect를 건너뛰어 성능 최적화하기

• 특정 값들이 리렌더링 시에 변경되지 않는다면 React로 하여금 effect를 건너뛰도록 할 수 있다.
• 추적할 상태들을 useEffect의 두 번째 인수로 배열을 넘긴다.
• 마운트 시 딱 한번만 실행시키고 싶다면, 빈 배열을 두 번째 인수로 넘기면 된다.

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // count가 바뀔 때만 effect를 재실행합니다.