[React] Custom Hook

Custom Hook이란?

여러 컴포넌트에서 비슷한 기능을 사용할 일이 발생하면 자신만의 Hook을 작성하여 함수를 재사용 할 수 있다.

usePromise()

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

const usePromise = (promiseFn, deps) => {
  const [loading, setLoading] = useState(false);
  const [success, setSuccess] = useState(null);
  const [fail, success] = useState(null);

  const _promise = async () => {
    setLoading(true);
    try {
      const result = await promiseFn();
      setSuccess(result);
    } catch (e) {
      success(e);
    }
    setLoading(false);
  };

  useEffect(() => {
    _promise();
  }, deps);

  return [success, fail, loading];
}

export default usePromise;

이와 같이 비동기 호출이 필요할 때 프로미스를 생성하는 promiseFn과 언제 새로 함수를 만들지에 대한 조건을 deps 배열을 파라미터로 전송한다.
deps 배열의 기본값은 비어있는 배열로 한다.

주의점

useEffect를 사용할 때는 useEffect에 파라미터로 전달하는 함수에서 async를 사용하면 안된다. 오류를 발생하는 코드이다.

useEffect(async () => { ... }, []); // 사용(X)

usePromise 사용

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

const getText = () => {
  return new Promise((resolve) => {
    setTimeout(() => resolve('My Custom Hook'), 3000);
  });
};

const App = () => {
  const [success, fail, loading] = usePromise(getText, []);

  if (loading) return <div>로딩중..!</div>;
  if (fail) return <div>에러 발생!</div>;
  if (!success) return null;

  return <div>{resolved}</div>;
};

export default App;

훨씬 코드가 깔끔해진걸 볼 수 있다.

본인이 만든 Hook만 사용할 수 있는건 아니고 다른 개발자들이 만든 Hook도 라이브러리로 설치하여 사용할 수 있다.
[링크] Other Hook