React Server Components에서 Context Provider가 동작하지 않습니다

Question

Next.js 16 App Router로 마이그레이션 중인데, 기존 ThemeContext를 RSC 안에서 쓰려고 하니까 동작 자체를 안 합니다.구조는 app/layout.tsx에서 ThemeProvider로 감쌌고, RSC인 app/page.tsx 안에서 useContext(ThemeContext) 호출하니 "Cannot read properties of null"이 떨어집니다.Provider는 'use client'를 붙여서 클라이언트 컴포넌트로 만들었는데도 RSC에서 못 가져오네요. 어떻게 처리해야 하나요?

김영삼 · Accepted Answer

Server Components에서는 React Context를 그대로 사용할 수 없습니다. Context는 런타임에 컴포넌트 트리 안에서만 의미가 있는데, Server Components는 빌드/요청 시 서버에서 직렬화되어 내려오기 때문입니다.핵심 정리:'use client' 가 붙은 Provider는 클라이언트 트리에서만 살아 있다Server Component는 그 트리 바깥(상위)에 있는 셈이라 useContext를 호출할 수 없다"Provider로 감쌌으니 안에서 다 쓸 수 있다"는 것은 클라이언트 한정 가정이다실무 해결 패턴 3가지:1) 데이터를 props로 내려준다 (가장 깔끔)// app/page.tsx (Server Component)
import { getTheme } from '@/lib/theme'
import ClientView from './ClientView'

export default async function Page() {
  const theme =

댓글 0