대부분의 React 애플리케이션은 컨텍스트에 의존한다. createContext를 통해 컴포넌트 간에 데이터를 직접 공유하거나 타사 라이브러리에서 가져온 공급자 컴포넌트를 통해 간접적으로 공유한다.
Next.js 13에서는 클라이언트 컴포넌트 내에서 컨텍스트가 완전히 지원되지만 서버 컴포넌트 내에서 직접 생성하거나 사용할 수는 없다. 이는 서버 컴포넌트에 React 상태가 없고(대화형이 아니기 때문에) 일부 React 상태가 업데이트된 후 트리에서 대화형 컴포넌트를 다시 렌더링 하는 데 주로 컨텍스트가 사용되기 때문이다.
서버 컴포넌트 간에 데이터를 공유하기 위한 대안에 대해 논의하겠지만 먼저 클라이언트 컴포넌트 내에서 컨텍스트를 사용하는 방법을 살펴보고자 한다.
- 클라이언트 컴포넌트에서 컨텍스트 사용하기
모든 컨텍스트 API는 클라이언트 컴포넌트 내에서 완벽하게 지원된다.
'use client';
import { createContext, useContext, useState } from 'react';
const SidebarContext = createContext();
export function Sidebar() {
const [isOpen, setIsOpen] = useState();
return (
<SidebarContext.Provider value={{ isOpen }}>
<SidebarNav />
</SidebarContext.Provider>
)
}
function SidebarNav() {
let { isOpen } = useContext(SidebarContext);
return (
<div>
<p>Home</p>
{isOpen && <Subnav />}
</div>
)
}
그러나 컨텍스트 공급자는 일반적으로 현재 테마와 같은 전역 문제를 공유하기 위해 응용 프로그램의 루트 근처에서 렌더링 된다. 서버 컴포넌트에서 컨텍스트가 지원되지 않기 때문에 애플리케이션의 루트에서 컨텍스트를 만들려고 하면 오류가 발생한다.
import { createContext } from 'react';
// createContext is not supported in Server Components
export const ThemeContext = createContext({});
export default function RootLayout({ children }) {
return (
<html>
<body>
<ThemeContext.Provider value="dark">{children}</ThemeContext.Provider>
</body>
</html>
)
}이 문제를 해결하려면 컨텍스트를 만들고 클라이언트 컴포넌트 내부에서 해당 공급자를 렌더링 해야 한다.
'use client'
import { createContext } from 'react';
export default function ThemeProvider({ children }) {
retrun <ThemeContext.Provider value="dark">{children}</ThemeContext.Provider>;
}이제 서버 컴포넌트는 클라이언트 컴포넌트로 표시되었기 때문에 공급자를 직접 렌더링 할 수 있다.
import ThemeProvider from './theme-provider';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html>
<body>
<ThemeProvider>{children}</ThemeProvider>
</body>
</html>
)
}공급자가 루트에서 렌더링 되면 앱 전체의 다른 모든 클라이언트 컴포넌트가 이 컨텍스트를 사용할 수 있게 되었다.
'Next.js' 카테고리의 다른 글
| Next.js 11-1 Routing Fundamentals (0) | 2023.05.18 |
|---|---|
| Next.js 10-5 React Essential Context (0) | 2023.05.18 |
| Next.js 10-3 React Essential 타사 패키지 사용 (0) | 2023.05.17 |
| Next.js 10-2 React Essential 패턴 (0) | 2023.05.12 |
| Next.js 10-1 React Essentials (0) | 2023.05.11 |