훅이 공식적으로 릴리즈되고, 그 개념과 사용법이 커뮤니티에 알려지기 시작하자, 예상했던 대로 창의력의 빅뱅이 일어났다. 전 세계의 개발자들이 리액트 팀이 제시한 아이디어를 바탕으로, 자신들만의 독창적인 커스텀 훅을 만들어내고 공유하기 시작했다.
npm(Node Package Manager)과 깃허브(GitHub)는 새로운 종류의 ‘레고 블록’들로 가득 차기 시작했다.
어떤 개발자는 브라우저의 localStorage나 sessionStorage에 데이터를 쉽게 저장하고 동기화하는 useLocalStorage 훅을 만들었다. 이제 개발자들은 복잡한 스토리지 API를 직접 다루지 않고도, const [name, setName] = useLocalStorage('username', 'Guest'); 한 줄로 영속적인 상태를 관리할 수 있게 되었다.
또 다른 개발자는 사용자의 타이핑이 멈춘 후에만 검색을 실행하는, ‘디바운싱(debouncing)’ 로직을 캡슐화한 useDebounce 훅을 공유했다. 검색창의 성능을 최적화하기 위해 모든 개발자가 고통스럽게 구현해야 했던 setTimeout과 clearTimeout의 조합이, 이제는 const debouncedTerm = useDebounce(searchTerm, 500); 한 줄로 해결되었다.
창의적인 아이디어는 계속해서 터져 나왔다.
useHover: 마우스 커서가 특정 요소 위에 올라와 있는지 여부를 알려주는 훅.useKeyPress: 특정 키보드 키가 눌렸는지를 감지하는 훅.useCopyToClipboard: 텍스트를 클립보드에 복사하는 기능을 손쉽게 구현해주는 훅.useIntersectionObserver: 특정 요소가 화면에 보이는지 여부를 알려주는, 복잡한Intersection ObserverAPI를 간결하게 추상화한 훅.
이 모든 훅들은 공통점을 가지고 있었다.
과거에는 모든 프로젝트에서 바퀴를 재발명해야 했던, 상태와 생명주기를 포함한 복잡한 로직들을, 이제는 잘 만들어진 부품처럼 가져다 쓸 수 있게 해준다는 것.
개발자들은 더 이상 npm install을 통해 단순한 유틸리티 함수만 설치하는 것이 아니었다. 그들은 이제 ‘상태 로직’ 그 자체를 패키지로 설치하고 있었다.
댄과 리액트 팀은 이 폭발적인 현상을 경이로운 눈으로 지켜보았다.
그들이 한 일은 useState와 useEffect라는 몇 개의 기본 블록과, ‘커스텀 훅’이라는 조립 설명서를 제공한 것뿐이었다. 하지만 커뮤니티는 그 블록들을 가지고 상상도 못 했던, 수천, 수만 가지의 새로운 창조물들을 만들어내고 있었다.
이것은 훅이라는 패러다임이 가진 진정한 힘을 증명하는 것이었다.
훅은 리액트 팀의 손을 떠나, 이제 커뮤니티 전체의 것이 되어가고 있었다. 로직을 공유하고 재사용하는 방식에 대한, 거대하고 분산된 오픈소스 실험이 전 세계적으로 시작된 것이다.
이 실험은 단순히 작고 귀여운 훅을 만드는 데서 그치지 않았다.
곧, 몇몇 선구적인 개발자들은 이 커스텀 훅의 개념을 극한으로 밀어붙여, 데이터 패칭이나 상태 관리 같은 리액트 개발의 가장 핵심적인 문제들을 해결하는, 거대한 라이브러리들을 탄생시키기 시작했다.
그들의 도전은, 리액트 생태계의 지도를 완전히 새로 그리게 될 터였다.
