Custom Hook

컴포넌트를 만들다보면, 반복되는 로직이 자주 발생한다. 예를 들어서 input을 관리하는 코드나 fetch기능을 수행하는 코드는 관리할 때마다 거의 비슷한 코드가 반복된다. 따라서 커스텀 훅을 이용해 중복되는 코드를 하나의 로직으로 묶어 언제나 쉽게 import할 수 있도록 준비하는 것이 좋다.
(로직의 반복 최소화, 재사용성 ↑)

커스텀 훅은 컴포넌트를 대체하는 것이 아니라 중복되는 코드들을 하나의 로직으로 컴포넌트와 비슷한 형태로 만드는 것이다.

• 커스텀 훅 사용 시 파일 이름은 use...로 만드는 것이 원칙이다.
  (react 공식 사이트에서 커스텀 훅은 이름이 use로 시작하는 자바스크립트 함수라고 명시)
• 커스텀 훅을 사용하는 법은 간단하다. 그 안에서 useState, useEffect, useReducer, useCallback등 hook들을 사용하여 원하는 기능을 구현해주고, 컴포넌트에서 사용하고 싶은 갚들을 반환해주면 된다.
• 커스텀 훅 또한 useState, useEffect와 같은 내장 훅을 사용한다.
• 커스텀 훅은 코드의 중복을 줄이고 재사용성을 높이며, 효율적인 관리를 위해 필요하다.
• 커스텀 훅은 기본 컴포넌트를 만들 때와 유사하고, JSX가 아닌 배열 혹은 객체를 return한다.
• 커스텀 훅을 사용하는 사용하는 방법은 useState와 거의 비슷하다.

참고: react 공식 사이트