Context API는 props을 사용하지 않고도 앱에서 state를 전달할 수 있는 깔끔한 방법입니다.

Context API는 props을 사용하지 않고도 앱 전체에서 state를 전달하고 state를 업데이트 할 수 있도록 하기 위해 도입되었습니다.

React 팀은 몇 가지 자식 수준를 전달해야 하는 경우 props을 사용하는 것이 좋습니다. Context API보다 훨씬 덜 복잡한 API이기 때문입니다.

대부분의 경우 Redux를 사용하지 않고 앱을 간소화하고 React를 사용하는 법을 배울 수 있습니다.

어떻게 작동합니까?

컨텍스트 개체를 반환하는 React.createContext()를 사용하여 컨텍스트를 만듭니다.

const { Provider, Consumer } = React.createContext()

그런 다음 공급자 구성 요소를 반환하는 래퍼 구성 요소를 만들고 컨텍스트에 액세스하려는 모든 구성 요소를 하위로 추가합니다.

class Container extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      something: 'hey'
    }
  }

  render() {
    return (
      <Provider value={{ state: this.state }}>{this.props.children}</Provider>
    )
  }
}

class HelloWorld extends React.Component {
  render() {
    return (
      <Container>
        <Button />
      </Container>
    )
  }
}

이 구성 요소는 글로벌 공급자가 될 것이므로 이 구성 요소의 이름으로 Container를 사용했습니다. 더 작은 컨텍스트를 만들 수도 있습니다.

공급자로 래핑 된 구성 요소 내부에서 컨슈머 구성 요소를 사용하여 컨텍스트를 사용합니다.

class Button extends React.Component {
  render() {
    return (
      <Consumer>
        {context => <button>{context.state.something}</button>}
      </Consumer>
    )
  }
}

함수를 제공자 값으로 전달할 수도 있으며 이러한 함수는 컨슈머가 컨텍스트 상태를 업데이트하는 데 사용됩니다.

<Provider value={{
  state: this.state,
  updateSomething: () => this.setState({something: 'ho!'})}}>
  {this.props.children}
</Provider>

/* ... */
<Consumer>
  {(context) => (
    <button onClick={context.updateSomething}>{context.state.something}</button>
  )}
</Consumer>

여러 컨텍스트를 만들어 구성 요소간에 상태를 분산시키면서 원하는 구성 요소로 상태를 표시하고 연결할 수 있습니다.

여러 파일을 사용하는 경우 한 파일에 콘텐츠를 만들고 사용하는 모든 위치에서 가져옵니다.

//context.js
import React from 'react'
export default React.createContext()

//component1.js
import Context from './context'
//... use Context.Provider

//component2.js
import Context from './context'
//... use Context.Consumer