use 훅의 다른 얼굴

use 훅은 Promise를 처리하여 비동기 데이터 페칭을 혁신적으로 바꿔놓았다. 하지만 React Core Team의 설계는 거기서 그치지 않았다. 그들은 use라는 이름에 걸맞게, 이 훅을 React의 다른 핵심 개념들을 관통하는 더 범용적인 도구로 만들고자 했다.

그들의 다음 목표는 바로 ‘컨텍스트(Context)’였다.

React 컨텍스트는 props를 통해 데이터를 단계별로 넘겨주는 ‘prop-drilling’ 문제를 해결하기 위한 강력한 기능이었다. 하지만 그 사용법은 다소 장황했다.

// The Old Way with useContext
import { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

function Button() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>I am a button</button>;
}

useContext 훅 자체는 훌륭했지만, 개발자들은 항상 import { useContext } from 'react'와 import { ThemeContext } from './ThemeContext'라는 두 줄의 코드를 작성해야 했다.

“우리가 use 훅을 컨텍스트에도 적용할 수 있다면 어떨까?”

팀 회의에서 이 아이디어가 제시되었다. use 훅의 본질은 ‘어떤 값을 풀어내는(unwrap)’ 것이었다. Promise를 풀어 그 결과값을 꺼내는 것처럼, 컨텍스트를 풀어 그 안에 담긴 값을 꺼내는 것도 논리적으로 일관성이 있었다.

이 아이디어를 바탕으로 use 훅의 기능이 확장되었다. 이제 use 훅은 Promise뿐만 아니라, React 컨텍스트 객체도 인자로 받을 수 있게 되었다.

// The New Way with use
import { use } from 'react';
import { ThemeContext } from './ThemeContext';

function Button() {
  const theme = use(ThemeContext); // <--- useContext 대신 use 사용
  return <button className={theme}>I am a button</button>;
}

코드의 변화는 미미해 보였다. useContext가 use로 바뀌었을 뿐이었다. 하지만 여기에는 중요한 철학적 변화가 숨어 있었다.

“use는 이제 ‘자원(resource)을 읽는’ 단일한 방법이 됩니다.”

로렌 탄이 설명했다. “그 자원이 네트워크 너머에 있는 비동기 데이터(Promise)이든, 컴포넌트 트리 상단에 있는 상태(Context)이든, 개발자는 use라는 일관된 API를 통해 접근할 수 있게 되는 거죠.”

이러한 일관성은 개발자의 인지 부하를 줄여주었다. 더 이상 ‘데이터를 가져올 땐 use를 쓰고, 컨텍스트를 읽을 땐 useContext를 써야지’라고 구분해서 생각할 필요가 없었다. 그저 ‘어떤 값을 읽어와야 할 때’는 use를 사용하면 그만이었다.

더 나아가, use 훅은 조건문이나 반복문 안에서도 호출할 수 있다는 중요한 특징을 가졌다. 이는 기존 훅의 규칙(Hooks can only be called at the top level)을 깨는 파격적인 변화였다.

function Component({ resource }) {
  // 조건에 따라 다른 자원을 읽어올 수 있다.
  const value = resource.type === 'promise' 
    ? use(resource.promise) 
    : use(resource.context);
  
  // ...
}

이 유연성은 use가 useState처럼 컴포넌트의 상태를 등록하고 관리하는 훅이 아니라, 단순히 렌더링 중에 값을 ‘읽어오는’ 훅이기 때문에 가능했다.

use 훅은 이제 두 개의 얼굴을 가진, 훨씬 더 강력하고 범용적인 존재가 되었다. 그것은 Promise와 Context라는, React의 서로 다른 개념을 ‘읽는다’는 하나의 행위로 통합하는 우아한 추상화였다. React 19는 이 작은 훅 하나를 통해, 프레임워크의 내부 개념들을 더욱 일관되고 조화롭게 엮어내고 있었다.