반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- mapGetters
- event
- Wecode
- Vue transition
- Vue
- v-html
- scss
- CSS
- State
- 쉬운설명
- JavaScript
- ES6
- Vue.js
- sass
- 리액트
- input
- express
- nodejs
- App.vue
- vuex
- storybook
- MySQL
- jsx
- TypeScript
- react
- 자바스크립트
- webpack
- 자료구조
- 댓글달기
- HOC
Archives
- Today
- Total
익명의 개발노트
[react] context API사용하기. 본문
반응형
context API는 리액트 내장 모듈이다.
기능은 리덕스 처럼 전역적으로 상태를 관리할 수 있게 해준다.
리덕스, MobX 등등 상태관리 도구라고 생각하면 좋을 듯 싶다.
기본적으로는 사용하고자 하는 곳에 createContext()로 선언해서 사용하며, 인자값으로 기본값을 넣을 수 있다.
const UserContext = React.createContext({
username: 'unknown',
helloCount : 0,
onHello : () => {}
});
위 값은 기본값이다.
class App extends Component {
constructor(props){
super(props);
this.state = {
username : 'Mike',
helloCount : 0,
onHello: this.onHello,
};
}
onHello = () => {
const {helloCount} = this.state;
this.setState({helloCount : helloCount + 1});
};
render() {
return (
<div>
<UserContext.Provider value={this.state}>
<div>상단메뉴</div>
<Profile/>
<div>하단메뉴</div>
</UserContext.Provider>
</div>
);
}
}
function Profile(){
return(
<div>
<Greeting/>
</div>
)
}
function Greeting (){
return (
<UserContext.Consumer>
{value => (
<React.Fragment>
<p>{`${value.username}님 안녕하세요`}</p>
<p>{`인사횟수 : ${value.helloCount}`}</p>
<button onClick={value.onHello}>인사하기</button>
</React.Fragment>
)}
</UserContext.Consumer>
)
}
createContext를 만들면 Provider, Consumer를 사용할 수 있다.
값을 내려주고자 하는 부분에 Provider 로 감싸주면 되고, 내리고자 하는 값 value에 다가 정해준다.
그리고 받고자 하는 부분에서 Consumer로 감싸주고 사용하면된다.
작동원리는 Consumer에서 Provider를 찾아가는 방식이다. 만약에 최상단까지 갔는데 Provider가 없으면 최초의 입력한 기본값으로 셋팅된다.
class App extends Component {
constructor(props){
super(props);
this.state = {
username : 'Mike',
helloCount : 0,
onHello: this.onHello,
};
}
onHello = () => {
const {helloCount} = this.state;
this.setState({helloCount : helloCount + 1});
};
render() {
return (
<div>
<UserContext.Provider value={this.state}>
<div>상단메뉴</div>
<div>하단메뉴</div>
</UserContext.Provider>
<Profile/>
</div>
);
}
}
만약에 Profile처럼 Provider밖으로 나올경우 Consumer는 Provider를 찾을 수 없으므로 기본값이 나오게 된다.
중첩으로 사용할 수 도 있다.
반응형
'코딩일기 > TIL' 카테고리의 다른 글
[리팩토링] 배열의 차집합 (0) | 2019.10.07 |
---|---|
[Sonar Qube] 환경설정 (0) | 2019.10.07 |
[vue] event-bus (0) | 2019.10.01 |
browser history API (0) | 2019.09.30 |
[react] css 작성방법 결정 (0) | 2019.09.30 |
Comments