Context
일반적인 React 어플리케이션에서 데이터들은 prop를 통해 하향식(부모 -> 자식) 으로 전달이 됩니다. 하지만,
어플리케이션 내에 많은 컴포넌트들이 특정 타입의 props(예를 들어 locale 설정, ui 테마) 를 받기 위해서는 좀 번거로울 수 있습니다.
그래서 Context 는 트리 레벨을 통해 prop를 전달하지 않으면서 컴포넌트 끼리 값을 공유하는 방법을 제공합니다.
Context를 언제 사용하느냐?
Context는 현재 인증된 사용자, 테마, 또는 기본 설정 언어와 같은 React 의 여러 컴포넌트에 대해서 '전역' 으로
여겨질 수 있는 데이터들을 공유하도록 설계되었습니다. 예를 들어 아래 코드에서는 Button 컴포넌트의 스타일을
지정하기 위해 'Theme' props를 수동으로 전달합니다
class App extends React.Component {
render() {
return <Toolbar theme="dark" />;
}
}
function Toolbar(props) {
// 툴바 컴포넌트는 무조건 "theme" props를 가져야 합니다.
// 그리고 이것을 ThemeButton로 전달해야 합니다.
// 만약, 앱에 있는 모든 single 버튼들이 테마를 가져야 할때는 정말 번거롭겠죠?
// 왜냐! 그것을 하기 위해서는 모든 컴포넌트들을 거쳐야 하기 때문이죠
return (
<div>
<ThemedButton theme={props.theme} />
</div>
);
}
function ThemedButton(props) {
return <Button theme={props.theme} />;
}
컨텍스트를 사용하면, 중간 컴포넌트를 거치지 않고 prop를 전달할 수 있습니다.
// 컨텍스트는 깊숙히 있는 컴포넌트 트리를 통해서 값을 보낼 수 있게 합니다.
// 모든 컴포넌트들을 거치는 번거로운 작업 없이 말이죠.
// 현재 테마를 위한 컨텍스트를 만들어 보겠습니다. ("light" 라는 default 테마를 사용해서요)
const ThemeContext = React.createContext('light');
class App extends React.Component {
render() {
// Provider를 사용하여 현재 테마를 트리 아래에다 전달합니다.
// 다른 컴포넌트들은 테마가 얼마나 깊은곳에 위치했냐 안했냐 몰라도 그냥 읽을 수 있습니다.
// 이 예제에서는, 우리는 "dark" 테마를 현재 값으로 보낼 것 입니다.
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
}
// 중간에 있는 컴포넌트들은 테마를 하향식으로 더이상
// 보내지 않아도 됩니다.
function Toolbar(props) {
return (
<div>
<ThemedButton />
</div>
);
}
function ThemedButton(props) {
// 이제 Consumer를 통해서 현재 테마의 값을 테마 컨텍스트로 읽을 수 있습니다.
// React가 가까운 테마 Provider를 찾아서 그 값을 사용할 수 있게 해줍니다.
// 이 예제 에서의 현재 테마는 "dark" 입니다.
return (
<ThemeContext.Consumer>
{theme => <Button {...props} theme={theme} />}
</ThemeContext.Consumer>
);
}
참고 : props가 많은 단계 아래로 통과되는 것이 아니면 Context 를 사용하지 마세요!
API - React.createContext
const {Provider, Consumer} = React.createContext(defaultValue);
{ Provider, Consumer } 짝을 만듭니다. 그리고 React가 Consumer 컨텍스트를 렌더링하면, Consumer 와 가장 가까운 Provider 위에
일치하는 컨텍스트 값을 읽어옵니다.
그리고 인수로 넣어준 defaultValue 는 트리에서 일치하는 Provider가 없는 경우에만 Consumer가 사용하게끔 되어있습니다.
이는 컴포넌트를 개별적으로 테스트 할 때 유용합니다.
참고 : undefined Provider 값을 전달한다고 해서 Consumer가 defaultValue를 사용하는 것은 아닙니다.
API - Provider
<Provider value= { /* some code here */}>
Consumer 가 Context의 변경사항을 가져올 수 있게 하는 React Component 입니다.
value는 Provider가 Consumer에게 전달할 props 가 들어갈 자리입니다. 이때 하나의 Provider는
많은 Consumer들과 연결될 수 있습니다. 또한, Provider를 여러개 중첩하여 트리 내에서 더 깊은 값을 무시할 수 도 있습니다.
API - Consumer
<Consumer>
{value => /* 컨텍스트 값이 렌더링됩니다. */}
</Consumer>
Consumer는 Context의 변경사항을 읽을 수 있는 컴포넌트 입니다.
이때 자식 컴포넌트로서의 기능이 필요합니다. 이 함수는 현재 Context 값을 받고 React 노드를 반환하고 있습니다.
value 함수에 전달된 인수는 트리에서 이 컨텍스트에 대해서 가장 가까운 Provider의 props와 같습니다.
위의 컨텍스트에 대한 Provider가 없는 경우, value 인수는 위의 createContext 에서 전달된 defaultValue 와 같습니다.