이론은 완성되었고, API는 설계되었다. 하지만 훅(Hooks)은 아직 실험실 안의 존재였다. 그것이 과연 수억 명이 사용하는 페이스북의 복잡하고 거대한 프로덕션 환경의 압력을 견뎌낼 수 있을지는 아무도 장담할 수 없었다.
리액트 팀은 비밀리에 내부 테스트에 착수했다.
그들은 페이스북의 여러 제품 팀 중에서, 새로운 기술에 개방적이고 도전적인 몇몇 팀을 신중하게 선정했다. 그리고 그들에게 아직 외부에 공개되지 않은 훅의 초기 버전을 공유하며, 실제 제품의 일부 기능을 리팩토링해달라고 요청했다.
첫 번째 반응은 예상대로 ‘혼란’이었다.
수년간 클래스 컴포넌트와 생명주기 메서드에 익숙해져 있던 개발자들에게, 훅은 너무나도 낯선 개념이었다.
“this가 없다고요? 그럼 상태는 어디에 속하는 거죠?”
“componentDidMount는 어디로 갔나요?”
“이 useEffect의 의존성 배열은 대체 왜 필요한 겁니까?”
초기 피드백은 훅의 학습 곡선이 결코 만만치 않음을 보여주었다. 댄과 소피는 이 과정을 면밀히 지켜보며, 개발자들이 어떤 부분에서 가장 어려움을 겪는지, 어떤 개념을 오해하는지 꼼꼼하게 기록했다. 이 피드백은 훗날 공식 문서와 가이드를 작성하는 데 더할 나위 없이 귀중한 자산이 될 터였다.
하지만 며칠이 지나고, 개발자들이 훅의 멘탈 모델에 서서히 익숙해지기 시작하면서, 분위기는 극적으로 바뀌었다.
혼란은 점차 감탄으로 변해갔다.
한 개발자는 수백 줄에 달하던 복잡한 클래스 컴포넌트를 훅을 사용하여 리팩토링한 후, 팀에 자신의 경험을 공유했다.
“처음에는 어색했지만, 일단 감을 잡고 나니 코드가 절반 이하로 줄었습니다. 무엇보다, 예전에는 세 군데에 흩어져 있던 데이터 구독 로직이 이제 useEffect 하나에 모여 있으니, 코드를 읽고 이해하기가 훨씬 쉬워졌습니다.”
또 다른 팀에서는 반복적으로 사용되던 상태 로직을 커스텀 훅으로 추출하는 데 성공했다.
“useCommentSubscription이라는 훅을 하나 만들어 두니, 댓글 기능이 필요한 모든 곳에서 단 한 줄의 코드로 로직을 재사용할 수 있게 되었습니다. 이건 정말 게임 체인저입니다. HOC 시절과는 비교가 안 돼요.”
가장 인상적인 피드백은 버그 감소에 대한 것이었다.
eslint-plugin-react-hooks 플러그인은 개발자들이 규칙을 어기거나 의존성 배열을 잘못 관리할 때마다 즉시 경고를 보냈다. 덕분에 과거에는 프로덕션 환경에서나 발견되었을 법한 미묘한 버그들이 개발 단계에서부터 원천적으로 차단되었다.
내부 테스트의 결과는 리액트 팀의 예상을 뛰어넘는 성공이었다.
훅은 실제 제품 코드의 복잡성을 성공적으로 길들였고, 개발자들의 생산성을 눈에 띄게 향상시켰다. 처음의 학습 장벽만 넘어서면, 그 누구도 다시 클래스의 시대로 돌아가고 싶어 하지 않았다.
리액트 팀은 마침내 확신을 얻었다.
이것은 더 이상 위험한 실험이 아니었다.
이것은 리액트의 명백한 ‘미래’였다.
이제 남은 것은 이 혁명을 세상에 알리는 일뿐이었다.
그들은 이 거대한 변화를 공개할 무대로, 몇 달 뒤에 열릴 가장 큰 리액트 행사를 점찍었다. 그곳에서 전 세계 수천 명의 개발자들이 지켜보는 가운데, 리액트의 새로운 시대를 선포할 계획이었다.
팀의 시선은 이제 하나의 날짜에 고정되었다.
2018년 10월 25일. 리액트 콘프(React Conf) 2018.
운명의 날이, 시시각각 다가오고 있었다.
