훅의 등장이 가져온 가장 예상치 못했고, 또 가장 의미 있는 변화는 프로그래밍 교육 현장에서 일어났다. 전 세계의 코딩 부트캠프 강사들과 온라인 강의 제작자들 사이에서 조용한 환호성이 터져 나왔다.
수년간, 그들은 리액트를 가르칠 때마다 첫 번째 관문에서 좌절감을 맛보아야 했다.
그 관문의 이름은 ‘클래스’와 ‘this’였다.
학생들에게 리액트의 선언적인 UI 개념을 설명하기도 전에, 그들은 먼저 자바스크립트의 객체 지향 프로그래밍과 클래스 문법의 복잡성을 가르쳐야 했다. constructor는 왜 필요한지, super()는 왜 항상 호출해야 하는지, 그리고 가장 큰 난관인 this가 컨텍스트에 따라 어떻게 변하는지를 설명하는 데 수많은 시간을 할애해야 했다.
한 교육자는 커뮤니티에 이런 글을 남겼다.
“리액트를 가르치는 첫 주, 저는 대부분의 시간을 리액트가 아닌 자바스크립트의 this 키워드에 대해 설명하는 데 씁니다. 학생들은 bind의 필요성을 직관적으로 이해하지 못하고, 리액트의 진짜 매력을 느끼기도 전에 지쳐버리곤 합니다.”
이것은 모든 리액트 교육자들이 공통으로 겪는 고통이었다.
리액트의 핵심 아이디어는 ‘UI는 상태의 함수’라는 지극히 단순하고 아름다운 것이었지만, 그것을 구현하는 도구였던 클래스는 초심자들이 넘기에는 너무 높은 벽이었다.
하지만 훅이 등장하면서, 이 모든 것이 바뀌었다.
강사들은 이제, 리액트 강의의 첫 페이지를 완전히 새로 쓸 수 있게 되었다.
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
이 코드를 가르치기 위해, 더 이상 클래스나 this에 대해 설명할 필요가 없었다.
“이것은 그냥 함수입니다. 그리고 이 useState라는 함수는 상태 값과 그 값을 바꿀 수 있는 함수를 우리에게 줍니다.”
이 설명만으로 충분했다.
학생들은 이제 자바스크립트의 난해한 부분에 발목 잡히지 않고, 리액트의 핵심인 ‘상태(state)’와 ‘UI’의 관계에 곧바로 집중할 수 있게 되었다.
상태가 변하면, 컴포넌트 함수가 다시 호출되어 새로운 UI를 반환한다.
이 직관적인 데이터 흐름을 처음부터 명확하게 이해할 수 있게 된 것이다.
리액트의 진입 장벽이 극적으로 낮아지는 순간이었다.
이전에는 컴퓨터 과학 전공자나 숙련된 개발자들의 영역처럼 느껴졌던 리액트가, 이제는 디자이너나 기획자, 혹은 이제 막 코딩에 입문한 학생들에게도 훨씬 더 친근하게 다가갈 수 있게 되었다.
댄과 리액트 팀은 이러한 교육 현장의 긍정적인 반응을 보며 깊은 보람을 느꼈다.
그들은 단순히 숙련된 개발자들의 문제를 해결한 것이 아니었다. 그들은 자신들도 모르는 사이에, 미래의 개발자들이 리액트와 처음 만나는 방식을 바꾸어 놓은 것이다.
훅은 숙련자에게는 더 나은 도구를, 그리고 초심자에게는 더 쉬운 길을 열어주는, 모두를 위한 선물이 되어가고 있었다. 이로써 훅은 리액트 생태계에 더 깊고 넓게 뿌리내릴 수 있는 단단한 토양을 얻게 되었다.
이제, 사람들은 훅을 ‘어떻게’ 사용하는지를 넘어, ‘어떻게 더 잘’ 사용할 수 있을지를 고민하기 시작했다. 그리고 그 과정에서, 훅이 가진 미묘한 함정들과 마주하게 될 터였다.
