[React] - 훅 직접 만들기

리액트가 제공하는 훅을 이용해서 커스텀(custom) 훅을 만들 수 있다. 훅을 직접 만들어서 사용하면 쉽게 로직을 재사용할 수 있다.
뿐만 아니라 컴포넌트의 복잡도가 낮아져 유지보수에 좋고 단순하고 명시적인 방법으로 리액트스럽게 훅을 사용한다는 장점이 있다.
리액트의 내장 훅처럼 커스텀 훅의 이름은 use로 시작하는 게 좋은데 그 이유는 코드 가독성이 좋아지고, 여러 리액트 개발 도구의 도움도 쉽게 받을 수 있기 때문이다.

사용법
> 아래처럼 useUser 훅을 만들 수 있고, 다른 컴포넌트에서 import 해서 사용할 수 있다.

import { useState, useEffect } from 'react';

export default function useUser(userId) {
  const [user, setUser] = useState(null);
  useEffect(() => {
    getUserApi(userId).then(data => setUser(data));
  }, [userId]);
  return user;
}

> Profile 이라는 부모 컴포넌트에서 userUser 훅을 가져와 사용한다.

import React from 'react';
import useUser from './useUser';

export default function Profile({userId}) {
  const user = useUser(userId);
  return (
    <div>
      {user && (
        <>
          <p>{`name is ${user.name}`}</p>
        </>
      )}
    </div>
  );
}