시간은 흘러, 202X년의 어느 날.
새로운 프로젝트에 막 합류한 주니어 개발자가 코드베이스를 처음 열어보는 순간을 상상해보자. 그녀는 리액트를 훅으로 처음 배운 ‘훅 네이티브(Hook Native)’ 세대다.
그녀의 눈앞에 펼쳐진 UserProfile.js 파일의 코드는, 이 이야기가 시작되었던 2016년의 그것과는 완전히 다른 모습이었다.
import React from 'react';
import { useUserProfile } from '../hooks/useUserProfile';
import { useTheme } from '../contexts/ThemeContext';
import Spinner from './Spinner';
import ErrorMessage from './ErrorMessage';
function UserProfile({ userId }) {
const { user, isLoading, error } = useUserProfile(userId);
const { theme } = useTheme();
if (isLoading) {
return <Spinner />;
}
if (error) {
return <ErrorMessage message={error.message} />;
}
return (
<div style={{ background: theme.background, color: theme.text }}>
<img src={user.avatarUrl} alt={user.name} />
<h1>{user.name}</h1>
<p>{user.bio}</p>
</div>
);
}
export default UserProfile;
파일 어디에도 class 키워드는 보이지 않았다.
constructor도, render 메서드도, this 키워드도 없었다.
componentDidMount나 setState 같은 낯선 단어는 주석에서조차 찾아볼 수 없었다.
코드는 마치 잘 쓰인 산문처럼, 위에서 아래로 자연스럽게 읽혔다.
useUserProfile훅을 호출하여, 필요한 사용자 데이터와 상태를 가져온다.useTheme훅을 호출하여, 현재 테마 정보를 가져온다.- 로딩 중이거나 에러가 발생했다면, 해당 UI를 먼저 보여주고 함수를 종료한다 (조기 반환).
- 모든 데이터가 준비되었다면, 그 데이터를 사용하여 최종 UI를 그린다.
모든 것이 명료하고 선언적이었다.
UserProfile 컴포넌트는 오직 ‘어떻게 보여줄 것인가’에만 집중했다. 데이터를 ‘어떻게 가져오는지’, 테마가 ‘어떻게 관리되는지’에 대한 모든 복잡한 로직은, useUserProfile과 useTheme이라는 의미 있는 이름의 커스텀 훅 뒤에 완벽하게 감춰져 있었다.
그녀가 useUserProfile 훅의 내부를 궁금해하며 파일을 열어보아도, 그곳에는 또 다른 훅들의 조합이 있을 뿐이었다.
// hooks/useUserProfile.js
import { useSWR } from 'swr';
export function useUserProfile(userId) {
const { data, error } = useSWR(`/api/users/${userId}`, fetcher);
return {
user: data,
isLoading: !error && !data,
error: error,
};
}
복잡성은 잘게 쪼개져, 각자의 역할을 책임지는 작은 함수들 안에 체계적으로 정리되어 있었다. 개발자는 언제든지 자신이 집중하고 싶은 추상화 단계까지만 파고들면 되었다.
이것이 바로 훅이 만들어낸 새로운 시대의 표준이었다.
코드는 더 이상 기계를 위한 명령의 나열이 아니었다.
그것은 다른 개발자들이 쉽게 이해하고 수정할 수 있도록 작성된, 인간을 위한 소통의 도구에 가까웠다.
과거, 클래스의 시대에 코드를 작성했던 개발자라면 이 풍경을 보고 감격의 눈물을 흘렸을지도 모른다. 그들을 괴롭혔던 모든 문제가 사라진, 그들이 꿈꿨지만 도달할 수 없었던 이상향이 바로 눈앞에 펼쳐져 있었기 때문이다.
훅 네이티브 세대에게는 이것이 그저 당연한 리액트의 모습이었다.
그들은 더 견고하고 높은 곳에서 자신들의 여정을 시작하고 있었다. 그리고 그들의 시선은, 훅이 해결한 클라이언트의 문제를 넘어, 또 다른 거대한 도전이 기다리는 곳을 향하기 시작했다.
