📚 Reference

• 공식 문서 1
• 참고 자료 1
• 참고 자료 2

📜 Chapter

props

composable

Custom hook

• custom hook
• 리액트 커스텀 훅
• React에서 커스텀 훅(Custom Hook)은 상태 로직(stateful logic)을 재사용할 수 있도록 하는 기능이다.
• React가 제공하는 기본 훅(useState, useEffect 등)을 조합해서 나만의 로직을 재사용할 수 있도록 만든 함수를 말한다.
• 여러 컴포넌트에서 반복되는 "비즈니스 로직"을 한 군데 모아놓은 '로직 전용 가방'이라고 생각하면 쉽다.
• 커스텀 훅은 리액트의 기본 훅들을 조합하여 UI와 상관없는 순수 로직을 캡슐화하고, 이를 여러 컴포넌트에서 공유하기 위해 사용하는 재사용 패턴이다.

사용하는 이유

• 똑같은 로직(예: API 호출, 드롭다운 열림/닫힘, 입력창 핸들링)을 모든 컴포넌트에 복사/붙여넣기 하면 코드가 길어지고 유지보수가 힘들어진다.
• 커스텀 훅을 쓰면:
  • 중복 제거: 공통 로직을 한 번만 작성하고 재사용한다.
  • 가독성 향상: 컴포넌트 파일에는 UI 코드만 남고, 복잡한 로직은 훅 내부로 숨길 수 있다.
  • 테스트 용이: 로직만 따로 분리되어 있어 테스트하기 좋다.