1217

Q. 커스텀 훅의 정의가 뭐야? 왜 커스텀 훅을 만들어 쓰는거야?

A. 커스텀 훅(Custom Hook)에 대해 설명해드리겠습니다.

커스텀 훅의 정의

커스텀 훅은 React에서 상태 관련 로직(state logic)을 재사용 가능한 함수로 뽑아내는 방법입니다. 이름이 "use"로 시작하는 JavaScript 함수이며, 다른 훅을 호출할 수 있습니다.

커스텀 훅을 사용하는 이유

1. 코드 재사용성

• 여러 컴포넌트에서 반복되는 로직을 하나의 훅으로 관리할 수 있습니다.
• DRY(Don't Repeat Yourself) 원칙을 지킬 수 있습니다.

2. 관심사 분리

• 복잡한 로직을 컴포넌트에서 분리하여 코드를 더 깔끔하게 유지할 수 있습니다.
• 비즈니스 로직과 UI 로직을 분리할 수 있습니다.

예시 코드

간단한 커스텀 훅의 예시를 보여드리겠습니다:

useInput.ts

const useInput = (initialValue: string) => {
  const [value, setValue] = useState(initialValue);
  
  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
  };

  return {
    value,
    onChange: handleChange
  };
};

SignupForm.tsx

function SignupForm() {
  const emailInput = useInput('');
  const passwordInput = useInput('');

  return (
    <form>
      <input type="email" {...emailInput} />
      <input type="password" {...passwordInput} />
    </form>
  );
}

이처럼 커스텀 훅을 사용하면 입력 필드 관리 로직을 재사용 가능한 형태로 분리할 수 있으며, 컴포넌트 코드가 더 간결해집니다.

'직감적으로 불편한' 지점에서 추상화의 유혹을 느끼고 뚜렷한 의사결정 없이 리팩터링을 단행하곤 하는데, 그 불명확한 판단으로 시간을 허비하는 일을 더이상 하지 않기 위해 제대로 정리해놓을 필요가 있다

핵심은 '비즈니스 로직과 UI로직의 분리'에 있음