Custom Hooks

리액트 컴포넌트 설계에 대해 정리하다가 커스텀 훅에 대해 접하게 되었고,

로직과 UI를 분리하면 좋을 것 같아서 정리해본다.

 

비슷한 로직이 여러 컴포넌트에서 사용될 때 주로 사용

중복되는 로직을 유틸 함수와 같은 느낌으로 커스텀 훅을 만들어서 최소화시킬 수 있다.

 

커스텀 훅 만드는 법

1. 중복되는 로직을 넣기
2. 파일 이름을 useXXX 로 만든다(약속)

// 예 useInput라는 input태그를 위한 state와 onChange 함수를 묶어줌
import { useState, useCallback } from "react";

export default (initialValue = null) => {
  // state 정의
  const [data, setData] = useState(initialValue );

  // 함수 정의
  const handler = useCallback(
    e => {
      const { value, name } = e.target;
      setData({
        ...data,
        [name]: value
      });
    },
    [data]
  );
  return [data, handler];
};

 

• 리액트의 기본 훅을 이용하여 구현하며, JSX 코드나 렌더링과 관련된 코드를 포함하면 안된다.
• 조건부 블록에선 사용하지 않는다.
• 보통 파라미터로는 초기값을 받아주고, return 부에는 배열로 value, setValue 형식을 취한다.

 

커스텀 훅의 특징

보통 API 호출, 폼 데이터 관리, 타이머/ 애니메이션 등의 기능에 응용됨

커스텀 훅은 컴포넌트 트리를 통하여 전달되어 생성하는 것이 아닌 각 컴포넌트에서 독립적으로 state 를 생성해준다. 그러므로 커스텀 훅을 사용해서 만든 기능은 각 컴포넌트에서 독립된 상태를 가지게 된다.

 

선언형 프로그래밍과 커스텀 훅

선언형 프로그래밍은 모든 코드를 보지 않아도 내부에서 잘 구현해놨다고 믿고 사용할 수 있는 프로그래밍

커스텀 훅을 사용하면 선언형 프로그래밍에 근접한 높은 레벨의 추상화 작업을 했다고 여기면 된다. 다만 추상화의 레벨이 높아서 한눈에 이해하기 쉽지 않을 수 있으므로 주의가 필요하다.