[React] 유틸함수와 커스텀 훅

유틸 함수

유틸 함수는 자주 사용되는 코드들을 모듈화해서 재사용할 수 있도록 하는 함수를 말한다.
꼭 React의 hook을 사용하지 않아도 일반적인 JavaScript 코드로 구성될 수 있다.

커스텀 훅

유틸 함수와 비슷한 개념이지만, React의 내장 훅을 사용하는 함수다.
이 외에도 훅은 리액트에서 정한 규칙들을 정해야 한다.
리액트 공식문서

• Top Level에서만 호출할 것

• 조건적 return 문 다음에 호출하지 말 것
  

• 이벤트 핸들러 내부에서 호출하지 말 것

• 클래스형 컴포넌트에서 호출하지 말 것

• use 접두사를 사용할 것

• useMemo, useReducer, useEffect와 같은 훅 안에서 다른 훅을 호출하는 것을 지양할 것
  단, 커스텀 훅은 다른 훅들을 호출할 수 있다. 커스텀 훅의 목적은 다른 훅을 호출해 특정 로직을 추상화하는 것이기 때문이다.

이런 규칙들은 React의 내부 동작과 관련이 있는데, React는 함수 컴포넌트가 렌더링될 때 훅 호출 순서를 추적하고, 각 훅의 상태를 관리한다. 그러나 위의 규칙들을 위반하면 React는 그 훅이 언제 호출되어야 하는지 추적하기 어려워진다. 즉, 상태관리와 생명주기 관리가 어려워진다.

eslint-plugin-react-hooks 플러그인을 사용해서 이런 실수들을 예방할 수 있다.