Context API 상태 관리 라이브러리

 

context api를 사용하고 싶다면 이제 useContext 훅과 같이 사용합시다.

darrengwon.tistory.com/182

React Hooks : useContext

 

---

 

<App /> 밑에 <Header /> 밑에 <User />밑에 <Login /> 컴포넌트에 props를 전달한다고 생각해보자.

 

const App = () => {...<Header user={user}/>...}

const User = ({user}) => {...<Login user={user}...}

const Login = ({user}) => {...}

 

이런식으로 꼬리에 꼬리를 무는 식으로 props를 전달해야 할 것이며 prop-types라도 쓰는 순간에는 순간에는 props를 단순히 전달해주는 컴포넌트에서도 일일히 prop-types를 전달해줘야 한다. 

 

이와 같은 상황을 막기 위해 Context API, Redux, mobx와 같은 상태 관리 라이브러리를 사용한다.

 

 

Context – React

 

간단한 웹을 만들어보면서 Context API를 구성해보자

 

 

이제 useContext을 이용해 context를 훅으로 사용합시다!

 

https://darrengwon.tistory.com/182

React Hooks : createContext, useContext

 

 

🚗 Set up

 

React 내장 createContext가 있으므로 따로 설치할 패키지는 없습니다.

 

 

🚓 Store.Provider, Store.Consumer

 

상태 관리 라이브러리는 크게 스토어(데이터가 저장되는 곳)와 프로바이더 (칠드런에게 데이터를 줌), 컨슈머(데이터를 사용함) 으로 구성됩니다. 물론 이처럼 Comsumer Provider 내부에 여러 컴포넌트를 배치하고 컨슈머를 주는 방법이 자주 사용됩니다.

 

<Store.Provider value={this.state}> //Consumer에서 state를 사용하기 위함
  <Store.Comsumer>
    {store => store.message ...}
  </Store.Comsumer>
</Store.Provider>

 

🚕 실사용

 

React package 내부에는 createContext가 존재합니다. 이를 이용해 Store를 생성해줍니다.

import React from "react";
const Store = React.createContext(null);
export default Store;

 

생성한 Store는 다음과 같은 방식으로 사용할 수 있습니다. Provider의 자식에 Consumer를 사용한 것에 주의합시다.

 

* Consumer 태그 내(Consumer의 child)에서는 일반 html을 사용할 수 없습니다. 오로지 함수인 child만 작동합니다.

* Provider에 포함시키고 싶은 함수는 constructor 내부에 있어야 합니다

class AppContainer extends Component {
  constructor(props) {
    super(props);
    this._changeMessage = () => {
      if (this.state.message === "hello") {
        this.setState({ message: "byebye" });
      } else {
        this.setState({ message: "hello" });
      }
    };
    this.state = {
      message: "hello",
      changeMessage: this._changeMessage
    };
  }
  render() {
    return (
      <Store.Provider value={this.state}>
        <Store.Consumer>
          {store => (
            <Button success seen={seen} onClick={store.changeMessage}>
              <FontAwesome name="check" />
            </Button>
          )}
        </Store.Consumer>
      </Store.Provider>
    );
  }
}