처음 만난 리액트 문서
14.5 여러 개의 Context 사용하기
앞에서 클래스 컴포넌트에서 Class.contextType을 사용하면 한 번에 하나의 Context만 사용할 수 있다고 배웠습니다. 그렇다면 여러 개의 Context를 동시에 사용하려면 어떻게 해야 할까요? 바로 Context.Provider를 중첩해서 사용하는 방식으로 구현할 수 있습니다. 아래 예시 코드를 한 번 보도록 하겠습니다.
// 테마를 위한 context
const ThemeContext = React.createContext('light');
// 로그인 한 사용자를 위한 context
const UserContext = React.createContext({
name: 'Guest',
});
class App extends React.Component {
render() {
const { signedInUser, theme } = this.props;
// App component that provides initial context values
return (
<ThemeContext.Provider value={theme}>
<UserContext.Provider value={signedInUser}>
<Layout />
</UserContext.Provider>
</ThemeContext.Provider>
);
}
}
function Layout() {
return (
<div>
<Sidebar />
<Content />
</div>
);
}
// Content컴포넌트는 두 개의 context로부터 값을 가져와서 렌더링 함
function Content() {
return (
<ThemeContext.Consumer>
{theme => (
<UserContext.Consumer>
{user => (
<ProfilePage user={user} theme={theme} />
)}
</UserContext.Consumer>
)}
</ThemeContext.Consumer>
);
}
위 코드에서는 ThemeContext와 UserContext 이렇게 총 두 개의 Context가 나옵니다. 그리고 App컴포넌트에서는 각 Context에 대해 두 개의 Provider를 사용하여 자식 컴포넌트인 Layout을 감싸주었습니다. 그리고 실제 Context의 데이터를 사용하는 Content컴포넌트에서는 두 개의 Consumer컴포넌트를 사용하여 데이터를 전달하고 있습니다.
이렇게 하면 여러 개의 Context를 동시에 사용할 수 있습니다. 하지만 두 개 또는 그 이상의 Context의 값이 자주 함께 사용될 경우, 모든 값들을 한 번에 제공해주는 별도의 render prop컴포넌트를 직접 만드는 것을 고려해보는 것이 좋습니다.
마지막 업데이트: 2025년 08월 21일 09시 05분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page