[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를 찾을 수 없으므로 기본값이 나오게 된다.

중첩으로 사용할 수 도 있다.