📖[React]Custom Hook

💗 Custom Hook이란?

리액트에서 제공되는 Hook 외에 더 필요한 기능이 있을 때 직접 만들어 사용하는 Hook
여러 컴포넌트에서 반복적으로 사용하는 logic을 custom하여 hook으로 만듦
이름이 use로 시작하고 내부에서 다른 Hook을 호출하는 하나의 자바스크립트 함수

각 Custom hook 은 호출에 대해 다른 state를 가지게 되서 완전히 독립적임

💗 Custom Hook 예시

🔸 중복되는 logic이 그대로 있는 경우(사용 안함)

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

function UseState(props) {
  const [isOnline, setIsOnline ] = useState(null);
  
  function handleStatusChange(status) {
    setIsOnline(status, isOnline);
  }
  
  useEffect(()=> {
    ServerAPI.subscribeUserStatus(props.user.id handleStatusChange};
            return() => {
    ServerAPI.unsubscribeUserStatus(props.user.id handleStatusChange);
    //컴포넌트가 unmount될 때 호출됨! 
	};
});

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

🔸 중복되는 logic을 custom한 경우

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

function useUserStatus(userId) {
  const [isOnline, setIsOnline ] = useState(null);
  
  useEffect(()=> {
  	function handleStatusChange(Status){
  setIsOnline(status, isOnline);
  }
  
  
    ServerAPI.subscribeUserStatus(user.id handleStatusChange};
	return() => {
    	ServerAPI.unsubscribeUserStatus(user.id handleStatusChange);
    //컴포넌트가 unmount될 때 호출됨! 
	};
});

return isOnline;

🔸 custom hook 사용하기

  function UserStatus(props){
    const isOnline = useUserStatus(props.user.id);

    if(isOnline === null ){
      return '대기중..';
     }
      return isOnline ? '온라인' : '오프라인';
   }
  
  function UserListItem(props){
    const isOnline = useUserStatus(props.user.id);
  //custom hook 사용 
  
  return (
    <li style = {{color: isOnline ? 'green' : 'black' }}>
      {props.user.name}
    </li>
  	);
  }