import React from "react";
const Store = React.createContext(null);
export default Store;
<Store.Provider value={data}></> : store 에 data 저장
import Store from "store";
class Container extends Component {
state = {
message: "Hello"
};
// store 에 저장된 state 는 변경될때 마다 사용 위치에 적용됨
componentDidMount = () => {
setTimeout(() => {
this.setState({
message: "bye"
});
}, 2000);
};
render() {
// Store 에 value 의 data 저장
return (
<Store.Provider value={this.state}>
<AppPresenter />
</Store.Provider>
);
}
}
<Store.Consumer>{store => ()</> : store의 props 에 접근
import Store from "store";
const Presenter = () => {
<Title>
<Store.Consumer>{store => store.message}</Store.Consumer>
</Title>;
};
class Container extends Component {
constructor(props) {
super(props);
this._changeMsg = () => {
if (this.state.message === "Hello") {
this.setState({
message: "Bye"
});
} else {
this.setState({
message: "Hello"
});
}
};
this.state = {
message: "Hello",
changeMsg: this._changeMsg
};
}
render() {
return (
<Store.Provider value={this.state}>
<AppPresenter />
</Store.Provider>
);
}
}
const Presenter = () => (
<Fragment>
<Store.Consumer>
{store => <Button success seen={seen} onClick={store.changeMsg} />}
</Store.Consumer>
</Fragment>
);