Custom Hooks

Custom Hooks

개발자가 스스로 커스텀한 훅을 의미하며 이를 이용해 반복되는 로직을 함수로 뽑아내어 재사용할 수 있다.

Custom Hooks 장점

• 상태관리 로직의 재활용이 가능하다
• 클래스 컴포넌트보다 적은 양의 코드로 동일한 로직을 구현할 수 있다.
• 함수형으로 작성하기 때문에 보다 명료하다(e.g. useSomething)

Custom Hooks 규칙

1. Custom Hook을 정의할 때는 함수 이름 앞에 use를 붙이는 것이 규칙이다.
   (만약 use를 안붙이면 일반함수로 인식하기 때문)
2. 대개의 경우 프로젝트 내의 hooks 디렉토리(혹은 utils)에 Custom Hook을 위치 시킨다.
3. Custom Hook으로 만들 때 함수는 조건부 함수가 아니어야 한다.
   즉 return 하는 값은 조건부여서는 안 된다.

• Custom Hook은 Hook 내부에서 useState와 같은 React 내장 Hook을 사용하여 작성할 수 있다.
  일반 함수 내부에서는 React 내장 Hook을 불러 사용할 수 없지만 Custom Hook 에서는 가능하다.
• 그렇다고 컴포넌트가 같은 state를 공유하는 것은 아니다.
  그저 로직만 공유할 뿐, state는 컴포넌트 내에서 독립적으로 정의 되어 있는 경우도 있다.