익명의 개발노트

[react] context API사용하기. 본문

코딩일기/TIL

[react] context API사용하기.

캡틴.JS 2019. 10. 6. 16:30
반응형

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