React Context 간단 정리
React 에서 일반적인 값을 자손에게 전달하는 방법은 하향식으로 전달해야한다.
전달받은 값을 자손에서 부모에게 변경하고 싶다고 알려주려면, 하향식으로 전달받은 함수를 이용해야한다.
Level 이 깊어질수록 불편함을 야기한다.
이를 해결하기위한 방법으로 flux, reflux, redux, mobx 를 이용할 수 있다.
React 16.3 부터는 Context API를 이용해서 트리의 모든 레벨에 값을 공유하는 방법을 제공한다.
Toggle 예제
// javascript
import React, { Component, useContext } from 'react';const MyContext = React.createContext(
{
bool: true,
toggleBool: () => {},
}
);const toggleStyle = (bool) => ({
backgroundColor: (bool ? '#000' : '#fff'),
color: (bool ? '#fff' : '#000')
});function Button({bool, toggleBool, children}) {
return (
<button onClick={toggleBool} style={toggleStyle(bool)}>
{children}
</button>
);
}class ContextApp extends Component {
constructor(props) {
super(props);
this.toggleBool = () => {
this.setState({bool: !this.state.bool });
};
this.state = {
bool: true,
toggleBool: this.toggleBool
};
}
render() {
return (
<div>
<MyContext.Provider value={this.state} >
<FunctionWrapper />
<ClassWrapper />
</MyContext.Provider>
</div>
);
}
}function FunctionWrapper() {
return (
<>
<div><FunctionToggleButton /></div>
<div><HookToggleButton /></div>
</>
)
}function FunctionToggleButton() {
return (
<MyContext.Consumer>
{({bool, toggleBool}) => (
<Button {...{toggleBool, bool}}>Function Toggle</Button>
)}
</MyContext.Consumer>
);
}function HookToggleButton() {
const {bool, toggleBool} = useContext(MyContext);
return (
<Button {...{toggleBool, bool}}>Hook Toggle</Button>
);
}class ClassWrapper extends Component {
render() {
return (
<div>
<ClassToggleButton />
</div>
)
}
}class ClassToggleButton extends Component {
static contextType = MyContext;
render() {
const {bool, toggleBool} = this.context;
return (
<Button {...{toggleBool, bool}}>Class Toggle</Button>
);
}
}
React.createContext
Context 객체를 만들수 있다.
const MyContext = React.createContext(defaultValue);
Context.Provider
Provider 를 이용하여 Context 변경 사항을 자손들에게 제공 할 수 있다.
<MyContext.Provider value={/* some value */}></MyContext.Provider>
Provider 의 Value는 하위의 모든 Consumer 에서 사용할 수 있으며, Provider 하위의 모든 Consumer 는 Provider 의 value가 변경 될 때마다 재 렌더링 된다.
Context.Consumer
MyContext Provide의 Value의 변경 사항을 구독하며, Context 에서 가장 가까운 Provider 의 Value 를 참조한다.
<MyContext.Consumer>
{(value) => (/* render something based on the context value */)}
</MyContext.Consumer>
Class.contextType
Class 의 contextType 에 Context 객체를 할당 할 수 있다.
this.context 로 해당 Context 의 Value를 참조할 수 있다.
class Some extends Component {
static contextType = MyContext;
render() {
const value = this.context;
return {}
}
}
Some.contextType = MyContext;Hook의 useContext
Hook의 useContext로 Context 객체의 value를 가져올 수 있다.
const value = useContext(MyContext);
