[React] useContext

들어가기 전

• useContext : Global State를 관리하는 hooks API
• 별도의 설정 필요 없이 hooks를 사용할 수 있는 환경이면 사용 가능

Store.js

• <프로젝트>/src/store/Store.js

import React, {useState} from 'react';

const StoreContext = React.createContext(null);

const StoreProvider = ({children}) => {
    const [number, setNumber] = useState(0);

    const store = {
        number, setNumber
    };

    return (
        <StoreContext.Provider value={store}>
            {children}
        </StoreContext.Provider>
    )
};

export {
    StoreProvider,
    StoreContext
};

Display.js

• <프로젝트>/src/components/Display.js

import React, {useContext} from 'react';
import {StoreContext} from "../store/Store";

const Display = () => {
    const {number, setNumber} = useContext(StoreContext);

    return (
        <div>number : {number}</div>
    )
};

export default Display;

Controller.js

• <프로젝트>/src/components/Controller.js

import React, {useContext} from 'react';
import {StoreContext} from "../store/Store";

const Controller = () => {
    const {number, setNumber} = useContext(StoreContext);

    return (
        <div>
            <button onClick={() => setNumber(number + 1)}>increase</button>
            <button onClick={() => setNumber(number - 1)}>decrease</button>
        </div>
    )
};

export default Controller;

App.js

• <프로젝트>/src/App.js

import React from 'react';
import {StoreProvider} from "./store/Store";

import Display from './components/Display';
import Controller from './components/Controller';

const App = () => {
    return (
        <StoreProvider>
            <Display/>
            <Controller/>
        </StoreProvider>
    );
};

export default App;

Multiple Context Example

NameContext.js

• <프로젝트>/src/context/NameContext.js

import React, {useState} from 'react';

const NameContext = React.createContext(null);

const NameContextProvider = ({children}) => {
    const [name, setName] = useState("unknown");

    const context = {
        name,
        setName
    };

    return (
        <NameContext.Provider value={context}>
            {children}
        </NameContext.Provider>
    )
};

export {
    NameContext,
    NameContextProvider
};

NumberContext.js

• <프로젝트>/src/context/NumberContext.js

import React, {useState} from 'react';

const NumberContext = React.createContext(null);

const NumberContextProvider = ({children}) => {
    const [number, setNumber] = useState(0);

    const context = {
        number,
        setNumber
    };

    return (
        <NumberContext.Provider value={context}>
            {children}
        </NumberContext.Provider>
    )
};

export {
    NumberContext,
    NumberContextProvider
};

ContextProvider.js

• <프로젝트>/src/context/ContextProvider.js

import React from 'react';
import {NumberContextProvider} from './NumberContext';
import {NameContextProvider} from "./NameContext";

const ContextProvider = ({children}) => {
    const Providers = compose(
        NumberContextProvider,
        NameContextProvider,
    );

    return (
        <Providers>
            {children}
        </Providers>
    )
};

const compose = (...providers) => {
    switch (providers.length) {
        case 0 : return f => f;
        case 1 : return providers[0];
        default : return providers.reduce((Parent, Child) => ({children}) => <Parent><Child>{children}</Child></Parent>);
    }
};

export default ContextProvider;

NameDisplay.js

• <프로젝트>/src/components/NameDisplay.js

import React, {useContext} from 'react';
import {NameContext} from "../context/NameContext";

const NameDisplay = () => {
    const {name} = useContext(NameContext);

    return (
        <div>
            <h1>Name Display</h1>
            {name}
        </div>
    )
};

export default NameDisplay;

NameControl.js

• <프로젝트>/src/components/NameControl.js

import React, {useContext} from 'react';
import {NameContext} from "../context/NameContext";

const NameControl = () => {
    const {setName} = useContext(NameContext);

    return (
        <div>
            <h1>Name Control</h1>
            <input type="text" onInput={(e) => setName(e.target.value)}/>
        </div>
    )
};

export default NameControl;

NumberDisplay.js

• <프로젝트>/src/components/NumberDisplay.js

import React, {useContext} from 'react';
import {NumberContext} from "../context/NumberContext";

const NumberDisplay = () => {
    const {number} = useContext(NumberContext);

    return (
        <div>
            <h1>Number Display</h1>
            {number}
        </div>
    )
};

export default NumberDisplay;

NumberControl.js

• <프로젝트>/src/components/NumberControl.js

import React, {useContext} from 'react';
import {NumberContext} from "../context/NumberContext";

const NumberControl = () => {
    const {setNumber} = useContext(NumberContext);

    return (
        <div>
            <h1>Number Control</h1>
            <input type="number" onInput={(e) => setNumber(e.target.value)}/>
        </div>
    )
};

export default NumberControl;

App.js

• <프로젝트>/src/App.js

import React from 'react';

import NumberDisplay from './components/NumberDisplay';
import NumberControl from './components/NumberControl';
import NameDisplay from './components/NameDisplay';
import NameControl from './components/NameControl';

const App = () => {
    return (
        <div>
            <NumberDisplay/>
            <NumberControl/>
            <NameDisplay/>
            <NameControl/>
        </div>
    );
};

export default App;

index.js

• <프로젝트>/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import ContextProvider from './context/ContextProvider';

const Index = () => {
    return (
        <ContextProvider>
            <App/>
        </ContextProvider>
    )
};

ReactDOM.render(<Index/>, document.getElementById('root'));

참고

• https://www.youtube.com/watch?v=6uBgda52yEo&feature=youtu.be
• https://www.youtube.com/watch?v=NHYC-KIri34&feature=youtu.be
• https://www.reddit.com/r/reactjs/comments/9lsxur/multiple_context_api/