React 19에서 사라진 useMemo, 우리는 무엇에 집중해야 하는가?

React 개발자들에게 '최적화'는 오랫동안 '수동으로 작성하던 메모이제이션'을 useMemo와 useCallback의 의존성 배열(dependency array)과 씨름하는 과정을 의미했습니다. 하지만 React 19와 React Compiler의 정식 등장으로 이 시대는 종말을 고했습니다.

이제 우리는 "어떻게 메모이제이션 할 것인가"가 아니라, "어떻게 구조화할 것인가"에 집중해야 합니다. 실제 개발자가 알아야 할 React 19의 핵심 변화를 짚어봅니다.

---

1. React Compiler가 코드를 최적화하는 내부 원리 (AST 분석) 🧠

React Compiler(코드네임: Forget)는 수동으로 작성하던 메모이제이션을 자동화합니다. 그 핵심은 추상 구문 트리(AST, Abstract Syntax Tree) 분석에 있습니다.

📌 어떻게 '자동'으로 가능한가요?

기존 React는 렌더링 시 값이 변하지 않아도 컴포넌트 전체를 다시 실행했습니다. 컴파일러는 빌드 타임에 여러분의 코드를 분석하여 다음과 같은 작업을 수행합니다.

• 컴포넌트 분해: 어떤 변수가 어떤 상태에 의존하는지 그래프를 그립니다.
• 메모이제이션 주입: 값이 변할 때만 해당 코드 블록이 실행되도록 저수준의 캐싱 로직을 자동으로 주입합니다.
• 규칙 검사: React의 규칙(Hooks 규칙 등)을 어긴 코드를 찾아내고, 최적화가 불가능한 경우 안전하게 최적화를 건너뜁니다.

이제 개발자는 useMemo(() => compute(), [deps]) 대신 그냥 const result = compute()라고 작성하면 됩니다. 컴파일러가 deps를 스스로 찾아내고 메모이제이션을 적용하기 때문입니다.

---

2. use API와 Suspense를 활용한 깔끔한 데이터 핸들링 🚀

React 19에서 가장 흥미로운 변화 중 하나는 use API의 등장입니다. 이는 비동기 데이터를 다루는 패러다임을 완전히 바꿉니다.

✅ use API의 혁신

과거에는 데이터를 불러오기 위해 useEffect와 useState를 조합하거나 React Query 같은 라이브러리에 의존해야 했습니다. 이제는 다음과 같이 작성할 수 있습니다.

import { use } from 'react';
function UserProfile({ userPromise }) {
  // Promise가 해결될 때까지 Suspense가 대기합니다.
  const user = use(userPromise);
return <div>{user.name}</div>;
}
javascript

💡 왜 유익한가요?

• 조건부 호출 가능: Hooks와 달리 use는 조건문(if)이나 루프(for) 안에서도 호출할 수 있습니다.
• Suspense와 완벽 결합: 데이터 로딩 중에는 상위의 Suspense가 로딩 UI를 보여주고, 에러 발생 시 ErrorBoundary가 처리합니다.
• Race Condition 해결: 상태 관리 없이도 선언적으로 데이터를 바인딩할 수 있어 명령형 코드의 버그가 사라집니다.

---

3. 수동 최적화가 필요 없는 시대의 성능 프로파일링 기법 📊

컴파일러가 최적화를 다 해준다면, 이제 성능 문제는 끝난 걸까요? 아닙니다. 이제는 '데이터 흐름'의 병목을 찾는 것이 더 중요해졌습니다.

① 불필요한 State 최소화

컴파일러가 메모이제이션은 해주지만, 원본 데이터(State)가 너무 자주 변경되면 소용이 없습니다. 상태를 최대한 하위로 밀어넣거나(State Colocation), 상태 대신 단순 변수를 사용할 수 있는지 점검해야 합니다.

② React DevTools의 새로운 활용

이제 DevTools에서 "Why did this render?"를 확인할 때, useMemo 누락을 찾는 것이 아니라 "어떤 컨텍스트(Context) 변경이 전파되고 있는가?"를 봐야 합니다. React 19의 use(Context)는 컴포넌트의 특정 부분만 컨텍스트를 구독하게 할 수 있어 최적화 포인트가 달라집니다.

③ 서버 컴포넌트(RSC)와의 시너지

성능의 끝판왕은 '클라이언트 코드를 줄이는 것'입니다. 로직의 상당 부분을 서버 컴포넌트로 옮기고, 클라이언트 컴포넌트는 오직 인터랙션(상태 변화)에만 집중하도록 설계하세요.

---

4. 결론: 개발자의 뇌 용량을 보존하세요 🧠✨

React 19의 메시지는 명확합니다. "컴퓨터가 잘하는 일(메모이제이션)은 컴퓨터에게 맡기고, 인간은 비즈니스 로직과 사용자 경험(UX)에 집중하라"는 것입니다.

• useMemo를 지우는 것을 두려워하지 마세요.
• use와 Suspense를 통해 비동기 로직을 선언적으로 만드세요.
• 단순한 코드가 가장 빠른 코드라는 원칙을 믿으세요.

이제 여러분의 프로젝트에서 수북이 쌓인 useMemo를 걷어내고, 더 본질적인 문제 해결에 에너지를 쏟아보시기 바랍니다!