[React] Custom Hook .09

안녕하세요! RyuWoong입니다.

자, 이번에는 Custom Hook에 대해 이야기 해보려고 합니다.

많이 쓰이는 방식이니 잘 보시고 부족한 부분이 있으면 말씀해주세요!

---

Custom Hook?

Custom Hook이 뭘까요? 자신이 만든 자신만의 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';
}

위는 친구의 상태가 온라인인지 오프라인인지에 대한 상태를 받아오는 로직입니다.

만약 이 곳 말고 예를 들어 친구 목록에서도 위 로직을 사용해야한다면, 복사 붙여 넣어 사용할 수 있지만 가장 좋은 방법은 아닐 겁니다.

 

React에는 상태 관련 로직을 컴포넌트에 공유하는 두 가지 전통적인 방법이 있는데 redner Props와 고차 컴포넌트(HOC) 입니다.

Hook을 사용하여 트리에 컴포넌트를 더하지 않고 위의 문제를 해결하는 Custom Hook을 만들어 보겠습니다.

 

Hook 추출하기.

두 개의 자바스크립트 함수에서 같은 로직을 공유하고자 할 때는 또 다른 함수로 분리합니다.

컴포넌트와 Hook 또한 함수이기 때문에 같은 방법을 사용할 수 있습닏.

 

Custom Hook은 이름이 use로 시작하는 자바스크립트 함수 입니다. Custom Hook은 다른 Hook을 호출할 수 있습니다.

예를 들면, 위 반복되는 로직을 useFriendStatus 라는 이름으로 CustomHook을 만들 수 있습니다. 아래와 같이 말이죠.

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

컴포넌트처럼 다른 Hook들은 사용자 Hook 내 있어야 하며, Custom Hook은 조건부 함수만 아니어야합니다.

 

React 컴포넌트와 다르게 Custom Hook은 특정한 시그니처가 필요 없습니다. 무엇을 인수로 받아야 하며 필요하다면 무엇을 반환해야 하는 지를 사용자가 결정할 수 있습니다. 보통의 함수와 똑같습니다. 이름만 반드시 use로 시작해야하는데 그래야 척봐도 Hook 규칙이 적용되는지 파악 할 수 있기 때문입니다.

 

Hook 이용하기

이제 만든 Hook을 이용하여 FriendStatus에 있던 로직을 대체해보겠습니다.

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

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

 

기존 방식과 정확히 같은 방식으로 동작합니다. Custom Hook은 React의 특병한 기능이기 보다 기본적으로 Hook의 디자인을 따르는 관습입니다. 주의 해야할 것은 Custom Hook을 만들 때 이름이 use로 시작해야하는 것입니다. 그래야 Hook의 규칙 위반을 자동으로 체크할 수 있기 때문입니다.

 

각 컴포넌트가 같은 Hook을 사용하더라도 State를 공유하지 않고 독립적입니다.

 

---

Hook도 단순하게 말하자면 함수이기 때문에 반복적인 작업을 줄이는데 사용할 수 있겠죠?!

오늘은 여기까지 입니다. 어려운 부분이 있다면 언제든지 물어봐주시면 감사하겠습니다.

 

참조.

https://ko.reactjs.org/docs/hooks-custom.html