"나만의 훅(Hook)을 만들어보자!"

---

관련 예시코드는 추후 업데이트 예정입니다

우리는 리액트에 빌트인 되어있는 useState, useEffect, useRef 등의 훅을 사용해왔다.

좋은 기능을 가진 내장된 훅들이 많이 있지만, 내가 원하는 구체적인 기능구현이 아쉬운 훅도 있기마련이다.
그럴때 기존의 훅을 활용하여 나만의 훅을 만들 수 있는데 이것을 커스텀 훅 이라고 한다.

먼저, 커스텀 훅이 언제 유용한지와 어떤 이점이 있길래 사용하는 것인지 살펴보자.

커스텀 훅의 필요성

• 반복되는 로직 을 여러 컴포넌트에서 재사용해야하는 상황일 때 유용하다.(예:토글, 입력값 관리 등) ⇒ 로직공유가능
• 코드 중복을 줄이고, 컴포넌트의 가독성과 유지보수성을 향상시켜준다.
• 로직을 한 곳에 모아두기 때문에 컴포넌트에서 간결하게 사용할 수 있다.

그렇다면 커스텀 훅은 어떻게 만들어야할까?

커스텀 훅 작성방법

• 훅 함수의 이름은 use 로 시작하고 뒤에 대문자로 시작해야한다. (*예: useInputValue, useToggleState 등)
• 훅 함수 내부에서 상태(useState) 및 이펙트(useEffect)등 빌트인 훅을 정의한다.
• 훅 함수 내부에서 로직을 처리한 후 필요한 값 또는 함수를 반환한다.
• 재사용이 필요한 경우에는 별도의 파일로 분리하여 모듈 내보내기를 한다.

리액트에 맞춰 linter를 설정해놓으면 작명규칙을 놓치지 않도록 잡아줄 것이다.

필요한 반복되는 로직을 나만의 훅으로 만들어서 사용하는 것은 어떻게 보면 매력적인 일이다.
이런 매력적인 커스텀 훅의 특징으로는 다음과 같은 내용들이 있다.

커스텀 훅의 특징

• 함수형 컴포넌트 또는 다른 커스텀 훅 내부에서만 사용할 수 있다.
• 하나의 훅에서 다른 훅으로 반응형 값을 전달할 수 있고, 값은 최신 상태로 유지된다.
• 한 곳에서만 사용하는 훅이라고하더라도 코드의 명확성을 위해 사용할 수 있다.
• 커스텀 훅을 사용하면 복잡한 로직을 숨길 수 있어 코드 가독성이 더 좋아진다.
• 커스텀 훅은 순수해야한다. 왜? 커스텀 훅안의 코드는 컴포넌트가 리렌더링될 때마다 같이 리렌더링되기 때문이다. ⇒ 모든 훅은 컴포넌트가 리렌더링될 때마다 재실행된다.
• useMount 와같은 커스텀 훅은 생성하면 안되며, 용도를 명확히 해야한다.
• 커스텀 훅을 통해서 받는 이벤트 핸들러는 Effect 로 감싸야한다. ⇒ 어떤 경우에 감싸주면 좋을까? (아래에서 계속...)

커스텀 훅으로 Effect를 감싸는 것이 유용할 때

• Effect로 주고받는 데이터 흐름을 매우 명확하게 만들 때
• 컴포넌트가 Effect의 정확한 실행보단 목적에 집중하도록 할 때
• 리액트가 새 기능을 추가할 때, 다른 컴포넌트의 변경없이 이 Effect를 삭제할 수 있을 때

---

정리하자면,

• 커스텀 훅은 반복되는 로직을 추상화하고 재사용할 수 있게 해준다.

• 로직을 분리하여 코드의 가독성, 유지보수성, 재사용성을 향상시킬 수 있다.

  ---

  🔗 참고자료
  https://ko.legacy.reactjs.org/docs/hooks-custom.html
  https://ko.react.dev/learn/reusing-logic-with-custom-hooks
  https://tanstack.com/