Context API

Version 01. basic

import React, { createContext } from 'react'

const Context = createContext()
const { Provider, Consumer: ApplicationConsumer } = Context


class ApplicationContextProvider extends React.Component {
    state = {
        color: 'blue'
    }

    actions = {
        setColor: (color) => {
            this.setState({ ...this.state, color })
        }
    }
    render() {
        const { state, actions, props: { children } } = this

        return (
            <Provider value={{ state, actions }}>
                {children}
            </Provider>
        )
    }
}

export {
    ApplicationConsumer,
    ApplicationContextProvider
}

import React from 'react'
import { ApplicationContextProvider } from './components/application-context'
import Box from './components/box'

function App () {
  return (
    <ApplicationContextProvider>
      <div>
        <Box />
      </div>
    </ApplicationContextProvider>
  )
}

export default App

import React from 'react'
import { ApplicationConsumer } from './application-context'

function Box() {
    return (
        <ApplicationConsumer>
            {
                (context) => {
                   console.log(context)
                   return (
                    <div>
                        {JSON.stringify(context)}
                    </div>
                   )
                }
            }
        </ApplicationConsumer>
    )
}

export default Box

version 02. HOC

import React, { createContext } from 'react'

const Context = createContext()
const { Provider, Consumer: ApplicationConsumer } = Context


class ApplicationContextProvider extends React.Component {
    state = {
        color: 'blue'
    }

    actions = {
        setColor: (color) => {
            this.setState({ ...this.state, color })
        }
    }
    render() {
        const { state, actions, props: { children } } = this

        return (
            <Provider value={{ state, actions }}>
                {children}
            </Provider>
        )
    }
}

function useApplicationContext(WrappedComponent) {
    return () => {
        return (
            <ApplicationConsumer>
                {
                    ({ state, actions }) => (
                        <WrappedComponent 
                            source={state}
                            actions={actions}
                        />
                    )
                }
            </ApplicationConsumer>
        )
    }
}

export {
    ApplicationConsumer,
    useApplicationContext,
    ApplicationContextProvider
}

import React from 'react'
import { useApplicationContext } from './application-context'

function Box(props) {
    console.log(props)
    return (
        <div>
            {JSON.stringify(props)}
        </div>
    )
}

export default useApplicationContext(Box)

import React from 'react'
import { useApplicationContext } from './application-context'

function Box({ actions, source }) {
    const { color } = source
    const { setColor } = actions
    
    return (
        <div>
            {color}
            <button onClick={() => setColor('red')}>색상변경</button>
        </div>
    )
}

export default useApplicationContext(Box)

version 03. Hooks

import React, { createContext, useContext, useState } from 'react'

const Context = createContext()

export function ApplicationContextProvider({ children }) {
    const [color, setColor] = useState('blue')

    return (
        <Context.Provider value={{
            color,
            setColor
        }}>
            {children}
        </Context.Provider>
    )
}

export function useApplicationContext() {
    return useContext(Context)
}

import React from 'react'
import { ApplicationContextProvider } from './components/application-context'
import Box from './components/box'

function App () {
  return (
    <ApplicationContextProvider>
      <Box />
    </ApplicationContextProvider>
  )
}

export default App

import React from 'react'
import { useApplicationContext } from './application-context'

function Box() {
    const { color, setColor } = useApplicationContext()

    return (
        <div>
            {color}
            <button onClick={() => setColor('red')}>색상변경</button>
        </div>
    )
}

export default Box