[React] Custom Hook

💡 커스텀 훅을 이용해 컴포넌트 로직을 함수로 만들어 재사용할 수 있다.

📌 예시

// FriendStatus

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);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });
  // 끝

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

// FriendListItem

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

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

✨ 커스텀 훅을 만들어 중복 로직 최소화하기

• 커스텀 훅은 이름이 use로 시작하는 자바스크립트 함수이다.
• 다른 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;
}

✨ 커스텀 훅 사용하기

// FriendStatus

function FriendStatus(props) {
  const isOnline = useFriendState(props.friend.id);
  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

// FriendListItem

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

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

• 같은 Hook을 사용하는 컴포넌트는 state를 공유하지 않는다.
• 각각의 Hook에 대한 호출은 서로 독립된 state를 받는다.
• React 관점에서 단순히 각 컴포넌트에서 useState와 useEffect를 호출한 것이기 때문에 각 컴포넌트의 state와 effect는 독립적이다.

✨ Hook에서 Hook으로 정보 전달하기

Hook은 함수이기 때문에 Hook 사이에서도 정보를 전달할 수 있다.

const friendList = [
  { id: 1, name: 'Phoebe' },
  { id: 2, name: 'Rachel' },
  { id: 3, name: 'Ross' },
];

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

  return (
    <>
      <Circle color={isRecipientOnline ? 'green' : 'red'} />
      <select
        value={recipientID}
        onChange={e => setRecipientID(Number(e.target.value))}
      >
        {friendList.map(friend => (
          <option key={friend.id} value={friend.id}>
            {friend.name}
          </option>
        ))}
      </select>
    </>
  );
}

• 지금 선택되어 있는 친구의 온라인 상태 여부를 알 수 있다.
• 다른 친구를 선택하고 recipientID를 업데이트하면 useFriendStatus Hook은 이미 선택되어 있는 친구의 구독을 해지하고 새로 선택된 친구의 상태를 구독할 것이다.

참고: React 공식문서