멘탈 모델의 완성

932025년 11월 16일3

어느덧, 훅은 리액트 세계의 새로운 질서로 완벽하게 자리 잡았다. 초기의 혼란과 논쟁은 잦아들고, 그 자리에는 훅을 중심으로 구축된 견고하고 성숙한 생태계가 남았다.

이 소설의 여정을 함께 해온 독자, 즉 새로운 시대의 리액트 개발자들은 이제 그들의 머릿속에 강력하고 명료한 ‘멘탈 모델’을 갖추게 되었다. 그들이 지난 수십 화에 걸쳐 댄, 소피, 세바스티안의 고뇌와 발견을 따라오며 체득한 지혜였다.

그 멘탈 모델은 몇 개의 핵심적인 문장으로 요약될 수 있었다.

첫째, “훅은 마법이 아니라, 호출 순서에 의존하는 배열이다.”
개발자는 더 이상 useState가 어떻게 상태를 기억하는지 신비롭게 여기지 않았다. 그들의 머릿속에는 리액트가 컴포넌트별로 가진 상태 배열과, 렌더링마다 0으로 초기화되는 인덱스 카운터의 이미지가 그려져 있었다. 이 단순한 기계적 모델은 ‘훅의 규칙’이 왜 절대적으로 필요한지를 직관적으로 이해시켜 주었다.

둘째, “커스텀 훅은 그저 로직을 담은 재사용 가능한 함수일 뿐이다.”
그들은 use로 시작하는 함수를 리액트의 특별한 기능으로 착각하지 않았다. 그것이 개발자들 사이의 ‘컨벤션’이자, 평범한 자바스크립트 함수 위에 세워진 우아한 패턴임을 이해했다. 이 깨달음은 그들에게 자신만의 훅을 만들고 조합하는 데 대한 자신감과 자유를 주었다.

셋째, “관련 있는 코드는 이제 함께 뭉쳐있다.”
그들은 useEffect를 보며 더 이상 componentDidMountcomponentWillUnmount를 떠올리지 않았다. 대신, ‘동기화’라는 개념을 떠올렸다. 구독을 시작하는 코드와 해지하는 코드가 하나의 블록 안에 공존하는 것을 당연하게 여겼다. useStateuseEffect를 조합하여 커스텀 훅으로 추출하면, 관심사가 완벽하게 캡슐화된다는 사실을 알고 있었다.

마지막으로, “이것이 훅의 전부다.”
그들은 훅이 생각보다 훨씬 더 단순한 몇 가지 원칙 위에 세워져 있다는 사실을 깨달았다. useState, useEffect라는 기본 블록과, 그것들을 조합하는 ‘커스텀 훅’ 패턴, 그리고 그 모든 것을 지탱하는 두 개의 ‘규칙’. 이 핵심만 이해하면, useReducer, useContext, useRef 등 다른 모든 훅들은 이 기본 모델의 응용이거나 보조 도구에 불과했다.

이 명료한 멘탈 모델은 개발자들에게 강력한 무기가 되었다.
그들은 이제 새로운 문제를 마주했을 때, 더 이상 암기한 API 사용법에 의존하지 않았다. 대신, 훅의 근본 원리로부터 해결책을 스스로 유추하고 설계할 수 있게 되었다. 버그를 마주쳤을 때도, 현상에만 매달리는 대신 원인이 될 만한 곳(주로 의존성 배열이나 훅의 규칙 위반)을 먼저 의심하는, 체계적인 디버깅 능력을 갖추게 되었다.

이 소설의 가장 중요한 목표가 달성되는 순간이었다.
독자들은 단순히 훅의 역사를 알게 된 것을 넘어, 훅처럼 ‘생각하는’ 방법을 배우게 된 것이다.

이제 그들은 이 새로운 사고방식을 가지고, 훅이 만들어낸 새로운 시대의 코드를 마주할 준비가 되었다. 그 코드는 과거의 유산과는 완전히 다른, 놀랍도록 간결하고 우아한 풍경을 보여줄 터였다.