커스텀 훅이란
리액트에서 커스텀 훅(Custom Hook)은 이름이 ‘use’로 시작하며 내부에서 useState, useEffect와 같은 훅들이나 다른 커스텀 훅들을 호출하는 함수를 말합니다. 이는 반복되는 상태 관련 로직이나 사이드 이펙트 처리 로직을 컴포넌트로부터 분리하여 재사용 가능하게 합니다. 따라서, 잘 만들어진 커스텀 훅은 압도적인 재사용성과 가독성으로 리액트 개발자를 춤추게할 수 있습니다.
참고자료 1 : React : 커스텀 Hook으로 로직 재사용하기
usehooks-ts란?
usehooks-ts는 타입스크립트를 완벽하게 지원하는 재사용 가능한 리액트 훅 라이브러리입니다. 이 라이브러리는 개발 과정에서 자주 사용되지만 직접 구현하기에는 번거로울 수 있는 다양한 로직들(예: 디바운싱, 스토리지 접근, 미디어 쿼리 등)을 간결하고 안정적인 훅 형태로 제공합니다.
npm install usehooks-tsusehooks-ts를 선택해야하는이유
- 타입스크립트 지원 : 현대 프론트엔드 개발에 필수적인 타입스크립트로 작성되어있습니다.
- MIT 라이센스 :
usehooks-ts는 MIT 라이센스를 따릅니다. 이는 매우 관대한 오픈소스 라이선스 중 하나로, 개인 프로젝트는 물론 상업적인 프로젝트에서도 자유롭게 사용, 수정, 배포할 수 있음을 의미합니다. - 가벼움 (Lightweight) 및 트리셰이커블 (Tree-shakable) : 라이브러리 자체가 매우 가볍게 설계되었습니다(5.3kB 3.1.1 Gzipeed) 또한,
ES2015 exports로 작성되어 모던 자바스크립트 번들러(Webpack, Rollup 등)의 트리셰이킹(Tree-shaking) 기능을 완벽하게 지원합니다. 즉, 실제로 사용하는 훅만 최종 번들에 포함되므로, 애플리케이션의 전체적인 크기를 최적화하고 로딩 속도를 개선하는 데 도움을 줍니다. - 활발한 커뮤니티 및 지속적인 유지보수:
usehooks-ts는 활발한 커뮤니티를 기반으로 지속적으로 업데이트되고 있으며, 이슈에 대한 피드백도 빠른 편입니다. 이는 라이브러리의 안정성과 장기적인 사용 가능성을 높여주는 중요한 요소입니다. (2025년 현재에도 꾸준히 개선되고 있습니다.)
특징
컴포지션 패턴 (Composition Pattern)
usehooks-ts의 훅들은 마치 레고 블록처럼 작은 단위로 잘 분리되어 있으며, 이러한 작은 훅들을 조합하여 더 복잡한 기능을 가진 훅을 구성합니다. 이는 각 훅의 책임을 명확하게 하고, 코드의 재사용성과 테스트 용이성을 높입니다.
예를 들어, 다크 모드 기능을 구현하는 useDarkMode 훅은 내부적으로 다음과 같은 훅들을 조합하여 사용합니다:
useIsomorphicLayoutEffect: 서버 사이드 렌더링(SSR) 환경과 클라이언트 환경 모두에서 안전하게layoutEffect를 사용할 수 있도록 합니다.useLocalStorage: 브라우저의 로컬 스토리지를 쉽게 사용하기 위한 훅입니다.useMediaQuery: CSS 미디어 쿼리의 변경을 감지하는 훅입니다.
더 나아가, useLocalStorage 훅은 useEventCallback과 useEventListener 훅을 사용하고, 이 두 훅은 다시 useIsomorphicLayoutEffect를 활용하는 등, 효율적인 의존 관계를 형성합니다.
이러한 컴포지션 패턴의 장점은 명확합니다:
- 재사용성 극대화: 작은 단위의 훅들은 다양한 곳에서 재활용될 수 있습니다.
- 테스트 용이성: 각 훅은 독립적으로 테스트하기 용이합니다.
- 가독성 및 유지보수성 향상: 작은 로직 단위로 분리되어 코드를 이해하고 수정하기 쉽습니다.
추상화 (Abstraction)
usehooks-ts는 복잡한 브라우저 API나 반복적인 로직을 사용하기 쉬운 형태로 추상화하여 제공합니다. 이를 통해 개발자는 내부 구현의 복잡성에 대해 깊이 알지 못해도, 원하는 기능을 몇 줄의 코드로 손쉽게 구현할 수 있습니다.
예를 들어, IntersectionObserver API는 특정 요소가 뷰포트에 들어왔는지 감지하는 강력한 기능이지만, 직접 사용하려면 설정이 다소 복잡하고 장황할 수 있습니다. 하지만 usehooks-ts의 useIntersectionObserver 훅을 사용하면, 단 몇 줄의 선언적인 코드로 이 기능을 깔끔하게 구현할 수 있습니다. .이러한 추상화는 개발자가 API의 상세 구현에 신경 쓰기보다, 핵심 기능을 더 집중할 수 있게 해줍니다.
훅 살펴보기
usehooks-ts의 여러 훅 중에서 유용하다고 생각하는 훅들을 몇가지 선정해보았습니다. 링크를 남겨 놓았으니 직접 둘러보시는 것을 추천드립니다.