Custom Hook은 함수일까 컴포넌트일까

 

custom hook을 사용해보고 싶은데, 정확히 어떤 개념인지 와닿지 않아서 간단하게 공식 문서를 읽어봤다. 

 

커스텀 훅이란?

제목에 먼저 답을 하자면 커스텀 훅은 함수다. 내부에서 다른 hook을 호출하는 함수를, 우리는 커스텀 훅이라고 부른다. 여기서 다른 hook이라 함은 우리가 자주 사용하는 useState, useEffect 등을 일컫는다.

 

즉 Custom hook은 함수이며, 일반 함수와의 차이점은 내부에서 다른 hook을 호출할 수 있다는 점이다.

 

💁🏻‍♂️ : 앗 그렇다면 일반함수에서는 hook을 호출 할 수 없는 것인가요?

➡️ 그렇다. 일반 함수에서는 hook을 호출할 수 없다.

 

리액트 공식문서를 살펴보면, hook을 사용할 때 두 가지 규칙이 존재한다.

1. React 함수의 최상위 레벨에서만 hook을 호출할 것. 
2. 일반 Javascript 함수에서 hook을 호출하지 말 것.

공식문서에 따르면 hook을 호출할 수 있는 위치는 두 가지 뿐이다.

React 함수 컴포넌트와 Custom Hook

 

꼭 use[어쩌구] 라고 네이밍 해야 할까?

결론부터 말하자면 정답은 ⭕️ 다. 커스텀 훅의 이름은 반드시 use로 시작해야 한다. 그 이유는 앞선 내용에서 찾을 수 있다. 함수명을 use어쩌구로 지음으로써 React에게 해당 함수가 커스텀 훅이라는 것을 알려줄 수 있다. 

 

언제 사용할까?

 

훅을 사용하는 로직이 반복된다면 이를 커스텀 훅으로 분리할 수 있다.

공식 문서에 나와있는 예제를 살펴보자.

 

• 친구의 접속 상태를 state로 관리하고, state에 따라 UI를 변경한다.
• useEffect를 이용해 친구의 접속 상태를 조회하는 API를 호출한다.

두 컴포넌트에서 같은 로직이 반복되는 것을 확인할 수 있다. 바로 이럴 때 해당 로직을 커스텀 훅으로 분리할 수 있다.

 

앞서도 언급했지만 Custom Hook은 함수다. 인자와 리턴값을 내가 원하는 대로 정할 수 있다. 이 예제에서는 isOnline이라는 상태값을 리턴했다.

 

여러 컴포넌트에서 동일한 Hook을 호출한다면?

Each call to a Hook gets isolated state. 

 

useState, useEffect가 포함된 커스텀 훅을 함수 내에서 호출했다고 가정해보자. 개발자 입장에서는 커스텀 훅을 호출한 것이지만, React는 이를 그저 일반적인 useState, useEffect를 호출한 것으로 여긴다고 한다.  각 컴포넌트의 states, effects가 서로 아무런 관계를 갖지 않는 것처럼, 동일한 hook을 호출했을 때에도 마찬가지다.