TIL_200906(React Hook 공식문서)

 

자신만의 Hook 만들기

여러 컴포넌트에 특정한 로직을 공유하길 원할때가 있습니다. 이때 두가지의 공유하는 방법이 있습니다.

1. render props

2. higher-order components

 

커스텀 Hook을 추출하기

커스텀 Hook은 "use"로 시작하는 Javascript 함수이고, 다른 Hook을 부를 수 있습니다.

import { useState, useEffect } from 'react';

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;
}

 

친구의 상태가 온라인 상태인지 여부를 확인하는 로직을 Custom Hook으로 만들었습니다. 상태를 확인하는 Custom Hook을 상태를 보여주는 FriendStatus와 온라인 친구를 녹색으로 표시하는 FriendListItem에 사용해봅니다. 

const isOnline = useFriendStatus(props.friend.id);

 

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>
  );
}

 

• Custom Hook은 무조건 "use"로 시작해야합니다. 그래야만 Hook 규칙에서 벗어났는지 자동으로 확인이 가능합니다. 
• Custom Hook을 이용한 두 컴포넌트가 같은 state를 공유하지 않습니다. 사용할 때마다 격리된 상태의 Hook을 사용합니다.
• Custom Hook은 완전히 격리된 상태이기 때문에 useState, useEffect를 사용할 수 있습니다. 

 

Hook간의 정보전달

이전에 만들어 놓은 Custom Hook을 이용하여 정보전달하는 예입니다.

const [recipientID, setRecipientID] = useState(1);
const isRecipientOnline = useFriendStatus(recipientID);

 

• isRecipientOnline 값을 받아서 화면에 표시됩니다.
• setRecipientID 함수로 recipientID 값을 바꾼다면 useFriendStatus에 새로운 값이 들어갑니다.
• useFriendStatus의 값을 isRecipientOnline으로 받아서 화면에 다시 표시됩니다.