📌 Custom Hook
자신만의 Hook을 만들면 컴포넌트 로직을 함수로 뽑아내어 재사용할 수 있다.
사용자 정의 Hook 추출하기
두개의 자바스크립트 함수에서 같은 로직을 공유하고자 할 때는 또 다른 함수로 분리한다.
컴포넌트와 Hook 또한 함수이기 때문에 같은 방법을 사용할 수 있다.
사용자 정의 Hook은 이름이 use 로 시작하는 자바스크립트 함수이다.
사용자 Hook은 다른 Hook을 호출할 수 있다.
본래와 동일한 코드일까?
작동방식에는 어떠한 변화도 없으며, 오로지 공통의 코드를 뽑아내 새로운 함수로 만든 것 뿐이다.
리액트의 특별한 기능이라기 보다는 기본적으로 Hook의 디자인을 따르는 관습이다.
❗️ 꼭 use로 시작되어야 한다.
(이미 있는 훅 이름은 안된다.)
같은 훅을 사용하는 두 개의 컴포넌트는 state를 공유할까?
아니다. 사용자 정의 훅은 상태 관련 로직을 재사용하는 매커니즘이지만 사용자 Hook을 사용할 때마다 그 안의 state와 effect는 완전히 독립적이다.
렌더링 중에 호출되는 모든 함수는 use로 시작해야 할까?
Hook을 호출하지 않는 함수는 Hook일 필요가 없다.
함수가 어떤 Hook도 호출하지 않는다면, use를 이름 앞에 작성하는 것을 피하고, use 없이 일반적인 함수로 작성하자!
하지만 적어도 하나의 Hook을 내부에서 사용한다면 반드시 함수 앞에 use를 작성해야 한다.
(이 자체가 Hook!)
그냥 컴포넌트 / 함수를 만들면 되는데 왜 굳이 Hook을 만들까?
커스텀 훅을 만드는 이유는 상태 관리나 사이드 이펙트 같은 로직을 재사용하기 위해서이다.
단순히 UI를 처리하는 것이라면 컴포넌트나 함수로 충분하지만, 리액트의 상태와 라이프 사이클을 활용해야 할 때에는 훅이 적합하다.
-
상태와 사이드 이펙트 로직의 재사용
리액트 컴포넌트는 UI와 상태 관리를 함께 처리하기 때문에 특정 로직을 다른 컴포넌트에서 재사용하려면 훅ㅇ이 유용하다. -
컴포넌트보다 더 세밀한 로직 관리
컴포넌트는 UI 중심으로 동작하고, 커스텀 훅은 로직 중심으로 동작한다. -
상태와 라이프 사이클 간결화
커스텀 훅은 리액트 상태 관리와 라이프 사이클 메서드를 한곳에 집중시킨다.
💡 각각 재사용 가능한 형태
- 컴포넌트 - UI
- 일반 함수 - 순수로직
- 커스텀 훅 - 상태, 사이드 이펙트, 라이프사이클
요약
- 커스텀 Hook을 사용하면 컴포넌트 간 로직을 공유할 수 있습니다.
- 커스텀 Hook의 이름은 use 뒤에 대문자로 시작되어야 합니다.
- 커스텀 Hook은
state자체가 아닌state저장 로직만 공유합니다. - 하나의 Hook에서 다른 Hook으로 반응형 값을 전달할 수 있고, 값은 최신 상태로 유지됩니다.
- 모든 Hook은 컴포넌트가 재렌더링될 때 마다 재실행됩니다.
- 커스텀 Hook의 코드는 컴포넌트 코드처럼 순수해야 합니다.
- 커스텀 Hook을 통해 받는 이벤트 핸들러는
Effect로 감싸야 합니다. useMount같은 커스텀 Hook을 생성하면 안 됩니다. 용도를 명확히 하세요.- 코드의 경계를 선택하는 방법과 위치는 여러분이 결정할 수 있습니다.
✨ 정식 문서 : react.dev
