[React] Custom Hook

React를 사용하다보면 높은 확률로 ( 거의 무조건 ) Hooks를 마주하게 될 것이다. 

당연하게 본인도 React를 사용하면서 Hooks를 아주 애용하면서 잘 사용하고 있다. 

 

이런 Hooks의 핵심? 장점?이 바로 Custom Hook를 만들어서 사용할 수 있다는 것이다. 

 

이미 사용하고 있는 useState, useEffect ... 등은 Rules of Hooks ( 훅의 규칙 ㅋ )만 

지켜주면 문제없이 사용할 수 있습니다. 

 

그렇다면 Custom Hook도 마찬가지로 해당 규칙만 지키면 될까요? 

또 어떤 경우에 Custom Hook을 만들면 좋을까요? 

 

useInput 

function useInput () {
  const [state, setState] = useState("");
  
  const onChange = (value) => {
    if(value > 100) return
  
    setState(value);
  }
  
  return [state, setState]
}

useInput을 리액트를 사용하는 개발자라면 한번쯤은 봤을 커스텀 훅입니다. 

 

예시를 위해서 간단하게 작성했는데, 설명 해보자면,

input의 값이 변경 될 때 그것의 길이가 100보다 길다면 업데이트를 하지 않는 로직이 필요할 때, 

 

그것을 컴포넌트마다 로직을 만들어주면 수많은 반복되는 코드가 발생할 것입니다. 

그래서 그런 경우 위와 같이 커스텀 훅을 사용해서 하나의 로직으로 만들어주면 재사용이 가능하다. 

 

그럼 어떤 경우에 사용하면 안될까? 

커스텀 훅이 매우 좋다는 건 알게 되었다. 그럼 모든 것을 커스텀 훅으로 만들면 되는데, 

어떤 경우에는 사용하면 안될까? 

 

동시에 사용할 수 있는가? 

우리가 만든 커스텀 훅을 여러 컴포넌트에서 동시에 사용해도 문제가 없어야 한다. 

즉, 커스텀 훅은 서로에게 영향을 끼치면 안된다. 

 

A라는 커스텀 훅은 전달받은 State가 변경될 때만 리렌더링이 발생한다고 생각해보자 

( 예, React.memo의 커스텀 훅 )

 

이것을 하나의 컴포넌트에서 동시에 사용한다면 어떻게 될까? 

 

X라는 State가 변경될 때 리렌더링이 발생하고, Y라는 State가 변경될 때 리렌더링이 발생해야 한다면 

두 State는 모두 A 훅을 사용해서 만들어 질 것이다. 

 

그러면 만약 X State가 변경되면 Y의 A 훅으로 인해서 업데이트가 발생하지 않고, 

Y State가 변경되면 X의 A 훅으로 인해서 업데이트가 발생하지 않는다. 

 

이것이 React.memo가 커스텀 훅으로 만들어지지 않은 이유가 된다. 

이걸 어찌어찌 하면 가능할수도 있지만....

 

디버깅이 용이한가? 

위 예시를 이어서 말하면, 

문제가 발생했을 때, A 커스텀 훅을 봄으로 바로 해결할 수 있을까? 

 

아니다 A가 사용되는 곳을 봐야한다. 

그런데 문제를 해결하기 위해서 봐야할 부분이 A 커스텀 훅이 사용된 모든 커스텀 훅을 

찾아봐야한다는 문제가 발생한다. 

 

만약 수많은 커스텀 훅에서 React.memo의 기능이 필요해서 A 커스텀 훅을 사용한다면? 

수많은 커스텀 훅을 다 살펴봐야지만 해결이 가능해진다. 

 

즉, 커스텀 훅을 만들 때 주의해야할 점이 

동시에 사용했을 때 문제가 없어야 하며, 디버깅이 용이해야한다. 

 

결국 Custom Hooks는 공통된 값을 다루지 말아야 한다. 

A 커스텀 훅의 경우 사용하는 리렌더링의 여부는 많은 컴포넌트에서 공유해서 사용한다. 

 

이것을 다루는 순간 다른 컴포넌트나 훅에 영향을 주게 된다. 

 

자 여기까진 우리가 알게 되었다. 

커스텀 훅의 어썸한 부분과 커스텀 훅을 만들 때 주의해야 할 점을... 

 

그러면 React를 사용할 때 Function으로만 만드는 경우와 Custom Hook을

만드는 경우는 언제일까? 

 

커스텀 훅은 재사용이 가능하도록 로직은 분리해서 코드를 추상화시켜 컴포넌트의 간결함을 

유지시켜준다. 

 

마찬가지로 일반적인 자바스크립트 함수 역시 로직을 분리시켜 재사용이 가능하도록 만들 수 있다. 

 

그럼 이 둘의 차이는 뭘까? 

나는 차이라기 보다는 React의 Hook이라는 친구는 일반적인 자바스크립트 함수이지만, 

더 깊은? 기능으로 생명 주기를 기반으로 하는 자바스크립트 함수라고 생각한다. 

 

그러므로 자바스크립트의 생명 주기를 다루면서, 공통된 값을 다루지 않는 경우 

커스텀 훅으로 만들어주면 될 것이라고 생각한다. 

 

 

참고 

https://medium.com/finda-tech/%ED%95%80%EB%8B%A4%EC%97%90%EC%84%9C-%EC%93%B0%EB%8A%94-react-custom-hooks-1a732ce949a5

핀다에서 쓰는 React Custom Hooks

https://overreacted.io/ko/why-isnt-x-a-hook/

이건 왜 Hook으로 만들지 않았죠?