React Compiler 도입으로 수동 메모이제이션 코드 제거 및 자동 최적화 실현함

Context

2020년 패턴 중심의 React 튜토리얼이 여전히 범람함. React 19 안정화, 컴파일러의 자동 메모이제이션, useEffect 남용 문제가 만연함.

Technical Solution

• use(): Promise를 Server Component나 Suspense 경계에서 직접 언래핑하여 데이터 페칭 패턴을 단순화함
• useOptimistic(): 실제 요청과 별개로 즉시 UI를 업데이트하여 낙관적 업데이트를 간소화함
• useActionState(): Form 제출 상태 관리를 위한 별도 상태 선언 없이 액션만으로 처리함
• TanStack Query: useEffect 기반 데이터 페칭을 대체하여 캐싱 및 동기화를 관리함
• React Compiler: 개발자가 직접 작성하던 memo, useMemo, useCallback을 자동 생성함

Key Takeaway

Server-first 렌더링 전략 채택 시 대부분의 UI를 서버에서 처리하고 클라이언트 사이드 최적화 부담을 줄일 수 있음. useEffect는 마지막 수단으로만 접근해야 하며 presence를 코드 스멜로 간주해야 함.