🍰 [221128 TIL] 커스텀.. 네?

✏️ 오늘 배운 것

Custom Hooks

개발자가 스스로 커스텀한 Hook을 의미하며 이것을 이용해 반복되는 로직을 함수로 뽑아내 재사용할 수 있다.

1. 상태관리 로직의 재활용
2. 클래스 컴포넌트보다 적은 양의 코드로 동일한 로직 구현
3. 함수형으로 작성하므로 명료함 (useSomething)

//FriendStatus : 친구가 online인지 offline인지 return하는 컴포넌트
function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

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

//FriendListItem : 친구가 online일 때 초록색으로 표시하는 컴포넌트
function FriendListItem(props) {
  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}

FriendStatus 컴포넌트는 사용들의 온/오프라인 여부를 확인하고, FriendListItem 컴포넌트는 사용자들의 상태에 따라 온라인이라면 초록색, 오프라인이라면 검은색으로 표시하는 컴포넌트이다. 두 컴포넌트는 정확하게 동일하게 사용된 로직이 있는데, Custom Hook을 사용하면 이 로직을 빼서 두 컴포넌트에 공유할 수 있다.

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}

두 컴포넌트에서 동일하게 사용되는 로직을 분리해 함수 useFriendStatus로 만든다.

Custom Hook을 만들 때 규칙이 필요하다.

• 함수 이름 앞에 use를 사용
• 프로젝트 내의 hooks 디렉토리에 위치
• 조건부 함수가 아니어야 함 (return 값이 조건부가 아니어야 함)

function FriendStatus(props) {
  const isOnline = useFriendStatus(props.friend.id);

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

function FriendListItem(props) {
  const isOnline = useFriendStatus(props.friend.id);

  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}