훅이 가져온 변화는 단순히 생산성 향상이나 버그 감소 같은 정량적인 지표로만 측정될 수 있는 것이 아니었다. 그것은 개발자들이 코드를 통해 자신을 표현하는 방식, 즉 ‘사고의 흐름’을 바꾸어 놓았다.
어느 날, 오랫동안 리액트로 개발을 해온 한 시니어 개발자가 자신의 블로그에 긴 회고의 글을 남겼다. 그 글은 수많은 개발자들의 깊은 공감을 얻으며 빠르게 퍼져나갔다.
글의 제목은 “내 코드는 더 이상 나에게 거짓말을 하지 않는다”였다.
그는 자신이 최근에 리팩토링했던, 아주 복잡한 클래스 컴포넌트에 대한 이야기로 글을 시작했다.
“그 클래스는 500줄이 넘는 괴물이었습니다. 수십 개의 상태와 메서드가 얽혀 있었고, 생명주기 메서드들은 온갖 종류의 부수 효과들로 가득 차 있었죠. 저는 버그를 수정하기 위해 코드를 읽을 때마다, 마치 잘 모르는 외국어로 쓰인 법률 문서를 해독하는 기분이었습니다. 코드의 구조는 제 생각의 흐름을 따르지 않았고, 리액트의 규칙(생명주기)에 제 생각을 억지로 끼워 맞춰야만 했습니다.”
그는 코드를 이해하기 위해 머릿속에서 끊임없이 컨텍스트를 전환해야 했다고 고백했다.
‘componentDidMount에서는 이 구독을 시작하고… 아, componentWillUnmount에서는 저 구독을 해지해야지. 잠깐, componentDidUpdate에서는 prevProps랑 비교해서 이걸 또 처리해야 했지…’
그의 머릿속은 로직 자체가 아니라, 로직을 담는 ‘그릇’의 복잡성을 처리하는 데 모든 에너지를 소모하고 있었다.
“그 코드는 기계를 위한 코드였습니다. 컴퓨터는 그 코드를 완벽하게 실행했지만, 정작 그것을 유지보수해야 하는 인간인 저에게는 너무나 불친절했습니다.”
그런 다음, 그는 그 괴물 같던 클래스를 훅으로 리팩토링한 경험을 이야기했다.
그는 거대한 클래스를 여러 개의 작은 커스텀 훅으로 분리했다. useDataFetching, useSocketConnection, useFormState…
“놀라운 경험이었습니다. 리팩토링이 끝난 후, 제 컴포넌트는 단 몇십 줄로 줄어들었습니다. 그리고 그 코드는 제 생각의 흐름을 거의 그대로 반영하고 있었습니다. ‘이 컴포넌트는 데이터를 가져오고(useDataFetching), 소켓에 연결하고(useSocketConnection), 폼 상태를 관리한다(useFormState).’ 코드 자체가 마치 제가 하고자 하는 일의 목차처럼 읽혔습니다.”
그는 더 이상 기계의 규칙에 자신을 맞출 필요가 없었다.
오히려 자신의 생각을 가장 자연스럽게 표현할 수 있는 작은 함수(커스텀 훅)들을 만들고, 그것들을 조립하여 원하는 결과를 만들어냈다.
그는 글을 이렇게 마무리했다.
“이전 코드가 기계를 위한 코드였다면, 지금 제 코드는 제 생각을 그대로 옮겨놓은 것 같습니다. 코드가 마침내 저 자신을 표현하게 된 것입니다. 훅은 저에게 더 나은 코드를 선물한 것이 아니라, 더 나은 방식으로 생각할 수 있는 능력을 선물했습니다.”
이 글은 훅이 가져온 가장 깊은 차원의 변화를 포착했다.
훅은 개발자들을 리액트의 내부 구현과 생명주기라는 복잡성으로부터 해방시켰다. 그리고 그 빈자리에, 개발자가 오직 문제의 본질과 비즈니스 로직에만 집중할 수 있는, 맑고 투명한 사고의 공간을 마련해주었다.
코드는 더 이상 싸워야 할 대상이 아니라, 생각을 표현하는 즐거운 매체가 되어가고 있었다.
