20221105 React Hooks - Custom Hooks 커스텀 훅

Hook의 규칙

• React 함수 구성 요소 내에서만 호출할 수 있음(반드시 Functional Component 안에서 사용해야 함)
• 구성 요소의 최상위에서만 호출할 수 있음
• 조건문, 반복문 안에서 못 씀

Custom Hook

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

- 중복된 코드를 발견하면 재사용이 가능한 함수로 만들어서 중복을 제거할 수 있음.

- 커스텀 훅 내부에서 다른 훅들을 자유롭게 조합가능(필요한 인터페이스와 기능 추가 가능)

- 커스텀훅 내부에서 커스텀 훅이 가지는 스테이트와 이펙트는  완전히 독립적이기 때문에 재사용이 아주 좋음

use0000 처럼 반드시 맨 앞에 use라는 단어를 붙여서 다른 개발자들이 Hook이라는 걸 알 수 있게 해줘야 함.

 

커스텀 훅 예시

1. useAsync

비동기 함수의 로딩, 에러 처리를 하는 데 사용할 수 있는 함수

function useAsync(asyncFunction) {
  const [pending, setPending] = useState(false);
  const [error, setError] = useState(null);

  const wrappedFunction = useCallback(async (...args) => {
    setPending(true);
    setError(null);
    try {
      return await asyncFunction(...args);
    } catch (error) {
      setError(error);
    } finally {
      setPending(false);
    }
  }, [asyncFunction]);

  return [pending, error, wrappedFunction];
}

2.useToggle

toggle 함수를 호출할 때마다 value 값이 참/거짓으로 번갈아가며 바뀜 (ON/OFF 스위치 등에 사용)

function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);
  const toggle = () => setValue((prevValue) => !prevValue);
  return [value, toggle];
}

 

 

 

참고자료 및 출처

https://github.com/streamich/react-use

GitHub - streamich/react-use: React Hooks — 👍

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

자신만의 Hook 만들기 – React

https://www.w3schools.com/react/react_customhooks.asp

React Custom Hooks

코드잇 - React로 데이터 다루기 강의