sanguk.dev
작성완료
React Custom Hook

React Custom Hook

Custom Hook은 여러 컴포넌트에서 비슷한 기능을 재사용할 수 있도록 하는 방법이다. usePromise 훅을 사용하여 비동기 호출을 처리하며, 프로미스 생성 함수와 의존성 배열을 파라미터로 받는다. useEffect에서 async를 사용하지 않아야 하며, 다른 개발자가 만든 훅도 라이브러리로 설치하여 사용할 수 있다.

React

Custom Hook이란?

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

usePromise()

javascript
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를 사용하면 안된다. 오류를 발생하는 코드이다.

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

사용

javascript
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