[리액트 공식문서] HOOK 5 ~ 8

5. Hook 규칙

- Hook은 JavaScript 함수이다. 하지만 Hook을 사용할 때는 두 가지 규칙을 준수해야 한다. 

- 1. 최상위(at the Top Level)에서만 Hook을 호출한다. 반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하지 않는다. 

- 2. 오직 React 함수 내에서 Hook을 호출해야 한다.

6. 자신만의 Hook 만들기

- 자신만의 Hook을 만들면 컴포넌트로 로직을 함수로 뽑아내어 재사용할 수 있다.

 

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

 

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

1) 사용자 정의 Hook 추출하기

- 위 컴포넌트 들에서 중복되는 로직을 또 다른 함수로 분리하자.

- 사용자 정의 Hook은 이름이 use로 시작하는 자바스크립트 함수이다. 사용자 Hook은 다른 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.unsubscribeToFriendStatus(friendID, handleStatusChange);
    };
  });
  
  return isOnline;
}

 

- useFriendStatus Hook의 목표는 친구의 상태를 구독하기 위함이다. 이를 위하여 friendID를 인수로 받고 온라인 상태의 여부를 반환한다.

2) 사용자 정의 Hook 이용하기

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

7. Hook API 참고서

1) useContext2) useReducer3) useCallback4) useMemo