context API는 react만으로 global state를 실현하기 위한 API입니다.
아래 기사에는 context api에 대한 개요가 있습니다.
React v16에서 구현 된 new Context API를 사용하여 Redux에 이별을 알립니다.
기본적으로 unstated라는 contextAPI를 매우 얇게 확장한 라이브러리가 있으므로 실무에서는 원시 ContextAPI를 사용하는 것이 아니라 unstated를 사용하는 것을 추천하고 있습니다.

Context API는 하나님의 축복입니다!

학습 코스트라고 하는 것이 존재하지 않고, 코드량도 적기 때문에, 프로토 타입 제작에 매우 적합합니다.
실전에서 사용하고 있는 기사를 보지 않기 때문에, 어떻게 Context Api로 설계를 하는지를 기사로 해 보았습니다.

그렇다면 실용적으로 context api를 사용하는 방법을 살펴 보겠습니다.
Flux 디자인 패턴에 따라 redux에서 얼마나 쉽게 마이그레이션할지에 중점을 두고 설계합니다.
먼저 컴포넌트에 store의 state가 어떻게 전달되는지 살펴 보겠습니다.

Context APi를 사용하여 Provider와 Connect라는 자작 클래스를 만들고 그에 따라 global state를 관리합니다.

Proveider는 store를 component에 전달하는 자체 제작 클래스입니다.

Routes는 여기 앱의 루트 구성 요소입니다.

Provider.js

import React from 'react'
import Routes from './Routes'
import {Provider} from './Redux'

const App = () =>
  <Provider>
    <Routes />
  </Provider>

export default App

Connect는 component에 store를 연결하기 위한 자작 클래스입니다.

Home.js

import React, { Component } from 'react'
import { Text, View } from 'react-native'
import { Connect } from '../Redux'

class Home extends Component {
   render() {
    const {age, increment} = this.props.store
    return (
      <View>
        <Text>{age}</Text>
        <Text onPress={() => increment()}>Increment!</Text>
      </View>
    )
  }
}

export default Connect(Home)

그러면 위의 두 가지 함수를 자작해 봅시다.

Context API로 Redux 재현

먼저 Context Api를 사용하기 위해 Store와 Provider, connect를 만듭니다.
클래스의 state를 Store로 취급하고 reducer 대신 setState를 사용합니다.

Redux.js

import React from 'react'

const Store = React.createContext()

export class Provider extends React.Component {
  /*--- store ---*/
  state = {
    age: 0
  }

  /*--- reducers ---*/
  increment = () => this.setState({age: this.state.age + 1})

  /*--- combineReducer ---*/
  render () {
    return (
      <Store.Provider
        value={{
          ...this.state,
          increment: this.increment
        }}
      >
        {this.props.children}
      </Store.Provider>
    )
  }
}

/*--- connect ---*/
export const Connect = ChildComponent => props =>
  <Store.Consumer>
    {context => <ChildComponent {...props} store={context}  />}
  </Store.Consumer>

Redux와의 비교

매우 간단하고 학습 비용이 낮네요. 소규모 앱에는 더 이상 없을 정도의 선택이군요.
10 페이지 정도의 앱이라면 문제없이 움직입니다. redux의 1/3 코드 양입니다.
이제 나는 context API 없이는 개인 개발을 할 수 없게 되었습니다.

다만, 앱이 비대화해 나가면, 독자적인 룰이 괴로워져 옵니다. 확장성도 없습니다. 비동기도 rxjs를 사용해도 쓰기 어렵습니다.
하지만 문제 없습니다. 우리는 redux가 있습니다.
context API는 쓰레기는 버리고 redux로 이행하면 됩니다. 거대한 생태계와 견고성이 우리를 행복하게 해줍니다.
Redux 만세! ! !