[FE] react-use, usehooks-ts, 마이그레이션 방법

react-use

가장 오래되고 가장 많은 훅을 제공하는 React 커스텀 훅 라이브러리 중 하나
'React 훅의 lodash'라고 불릴 만큼, 개발 중에 필요할 수 있는 거의 모든 종류의 유틸리티 훅을 방대하게 포함하고 있다.

특징

1. 압도적인 훅의 개수: 160개가 넘는 방대한 양의 훅을 제공하며 센서, UI, Side Effect 관리, 상태 관리 등 거의 모든 카테고리를 다룬다.
2. 성숙도/안정성: react-use는 오랫동안 많은 프로젝트에서 사용되어 왔기 때문에 성숙도와 안정성이 검증되었다고 볼 수 있다.

고려할 점

하지만 라이브러리 자체가 TypeScript 우선으로 설계되지는 않았기 때문에, 타입 추론이 다소 아쉬운 부분이 있을 수는 있다.
또한, 매우 큰 라이브러리이다 보니 최신 React 기능 변경에 대한 반응이나 업데이트가 다소 느릴 수 있다.

usehooks-ts

usehooks-ts는 TypeScript를 기반으로 만들어진 모던한 React 커스텀 훅 라이브러리이다.
이름에서 알 수 있듯이 타입 안정성에 큰 중점을 두고 있으며, 깔끔한 API와 훌륭한 공식 문서로 최근 많은 개발자에게 인기를 얻고 있다.

특징

1. TypeScript 우선 설계: 모든 훅이 처음부터 TypeScript로 작성되어 완벽한 타입 추론과 자동 완성을 지원한다.
2. 엄선된 훅 컬렉션: react-use처럼 방대하진 않지만, 실무에서 가장 자주 사용되는 필수적인 훅들을 중심으로 잘 정제된 컬렉션을 제공한다.(useLocalStorage, useDarkMode, useIntersectionObserver, useDeboounce 등)
3. 모던/깔끔한 API: 최신 React 패턴을 따르며, 사용하기 쉽고 직관적인 API를 가지고 있다. SSR 환경을 고려한 훅(useSsr)도 포함되어 있다.

고려할 점

하지만 react-use에 비해서는 훅의 개수가 적다.
매우 특수하거나 흔하지 않은 훅이 필요할 경우, usehooks-ts에는 없을 수도 있다.

react-use → usehooks-ts 마이그레이션

고려할 점

마이그레이션 전에, 잠재적인 문제들을 미리 파악해두는 것이 중요하다.

1. API 비호환성
두 라이브러리를 이름이 같은 훅이라도 API가 다를 수 있다.
단순히 import 경로만 바꾸면 에러가 발생할 가능성이 높다.

교체하려는 모든 훅에 대해 usehooks-ts의 공식 문서를 확인하고, 새로운 API에 맞게 코드를 수정해야 한다.

2. 존재하지 않는 훅
react-use는 매우 방대한 훅 컬렉션을 가지고 있지만, usehooks-ts는 실용적인 훅을 엄선하여 제공한다. 따라서 현재 사용 중인 특정 훅이 usehooks-ts에는 없을 수 있다.

usehook-ts에 없는 훅들에 대해서는
1. 대체 라이브러리를 사용하거나,
2. 기능이 복잡하지 않다면 직접 구현하거나,
3. 안전한 훅에 한해서만 react-use 의존성을 남겨둘 수 있다. (비권장)

3. SSR 동작 방식 차이

usehooks-ts의 훅들은 서버 환경에서 에러를 방지하기 위해 window 같은 브라우저 전용 API에 접근하지 않는다.

서버에서는 기본값(initial value)을 반환하고, 클라이언트에서 하이드레이션(hydration)된 후 useEffect를 통해 실제 브라우저 환경의 값을 읽어와 상태를 업데이트한다.

이 방식으로 인해 서버에서 렌더링된 초기 화면과 클라이언트에서 최종적으로 렌더링된 화면 사이에 미세한 차이(UI 깜빡임 등)가 발생할 수 있다.

4. 미묘한 동작 차이

API가 동일해 보여도 내부 구현 로직의 차이로 인해 예기치 않은 동작이 발생할 수 있다.
마이그레이션 후에는 반드시 해당 기능에 대한 테스트를 진행해야한다.
단순히 에러 없이 실행되는 것을 넘어, 기존과 동일하게 동작하는지 기능적 검증을 거쳐야 한다.

마이그레이션 실행 절차

1. pnpm add usehooks-ts 라이브러리 설치
2. 프로젝트의 모든 react-use 훅을 파악하고 목록화한다.
3. 훅들을 usehooks-ts로 전환하기 위해 API의 차이점, 대체 훅이 없는 경우 등을 파악한다.
4. 컴포넌트 단위로 코드를 점진적으로 수정하며 훅을 교체한다.
5. 이후 기능 및 SSR 환경에서 문제가 없는지 테스트한다.
6. 모든 테스트가 완료되면 프로젝트에서 react-use 라이브러리를 완전히 제거한다.