커스텀 훅의 폭발적인 성장 속에서, 몇몇 개발자들은 리액트 팀이 만들었던 useFetch 프로토타입의 한계를 넘어서는, 더 야심 찬 도전을 시작했다.
그들은 질문했다.
“데이터 패칭은 단순히 데이터를 가져오는 행위로 끝나지 않는다. 캐싱(caching)은 어떻게 할 것인가? 화면에 다시 포커스가 돌아왔을 때 데이터를 자동으로 갱신(revalidation)할 수는 없을까? 같은 데이터를 여러 컴포넌트에서 동시에 요청할 때, 중복된 네트워크 요청을 어떻게 막을 것인가?”
이것들은 모든 대규모 애플리케이션이 마주하는, 복잡하고도 중요한 문제들이었다.
이 문제들을 해결하기 위해, 두 개의 강력한 라이브러리가 거의 동시에 등장하며 데이터 패칭의 패러다임을 완전히 바꾸어 놓았다.
하나는 태너 린슬리(Tanner Linsley)가 만든 react-query(훗날 TanStack Query로 발전)였고, 다른 하나는 Vercel(과거 Zeit) 팀이 만든 SWR이었다.
두 라이브러리는 세부적인 구현은 달랐지만, 핵심 철학은 같았다.
‘서버의 상태를, 클라이언트에서 관리하는 것은 어렵고 번거로운 일이다. 이 모든 복잡한 과정을 추상화하여, 개발자가 단 하나의 훅을 통해 서버 상태를 마치 로컬 상태처럼 쉽게 다룰 수 있게 하자.’
그들이 제시한 API는 놀랍도록 간결했다.
SWR (Stale-While-Revalidate):
import useSWR from 'swr';
function UserProfile({ userId }) {
const fetcher = url => fetch(url).then(res => res.json());
// useSWR 훅 호출
const { data, error } = useSWR(`/api/users/${userId}`, fetcher);
if (error) return <div>Failed to load</div>;
if (!data) return <div>Loading...</div>;
return <h1>Hello, {data.name}!</h1>;
}
react-query:
import { useQuery } from 'react-query';
function UserProfile({ userId }) {
// useQuery 훅 호출
const { isLoading, error, data } = useQuery(['user', userId], () =>
fetch(`/api/users/${userId}`).then(res => res.json())
);
if (isLoading) return 'Loading...';
if (error) return 'An error has occurred: ' + error.message;
return <h1>Hello, {data.name}!</h1>;
}
개발자는 더 이상 useState로 로딩, 데이터, 에러 상태를 직접 관리할 필요가 없었다. useEffect 안에서 fetch를 호출하고, catch와 finally 블록을 신경 쓸 필요도 없었다.
이 훅들은 그 모든 것을 내부적으로 처리해주었다.
뿐만 아니었다.
- 한번 가져온 데이터는 자동으로 캐싱되어, 같은 요청이 다시 발생하면 네트워크를 타지 않고 캐시에서 즉시 데이터를 반환했다.
- 사용자가 브라우저 창을 벗어났다가 다시 돌아오면, 데이터가 오래되었을 수 있다고 판단하여 백그라운드에서 자동으로 데이터를 재검증(revalidate)하고 화면을 갱신했다.
- 여러 컴포넌트가 거의 동시에 같은 데이터를 요청하면, 실제 네트워크 요청은 단 한 번만 보내고 그 결과를 모든 컴포넌트에 공유했다.
이것은 데이터 패칭에 대한 접근 방식을 근본적으로 바꾸는 혁신이었다.
개발자들은 이제 ‘데이터를 어떻게 가져올지’라는 명령적인 로직에서 해방되어, ‘어떤 데이터가 필요한지’만 선언하면 되었다.
댄과 리액트 팀은 이 라이브러리들의 등장을 보며 깊은 감명을 받았다.
그들이 심었던 ‘커스텀 훅’이라는 작은 씨앗이, 이제는 자신들의 상상을 뛰어넘는 거대한 나무로 자라나고 있었다.
훅은 더 이상 리액트 코어만의 전유물이 아니었다.
그것은 커뮤니티 전체가 함께 가꾸고 발전시키는, 살아있는 생태계가 되었다. 그리고 이 생태계는 데이터 패칭뿐만 아니라, 리액트 개발의 모든 영역으로 자신의 영향력을 확장해나가기 시작했다. 애니메이션, 폼 관리, 스타일링… 훅이 정복하지 못할 영역은 없어 보였다.
