[React] Context로 부모 데이터 변경하는 방법

 

 

Props는 데이터가 부모에서 자식 컴포넌트로 단방향으로만 이동할 수 있습니다.

하지만, Context를 사용하면 자식 컴포넌트에서 부모 컴포넌트의 데이터를 변경할 수 있습니다.

 

[예제]

예제를 통해서 어떤 식으로 동작하는지 알아보도록 하겠습니다.

버튼을 클릭하면 ContextApi 컴포넌트의 state 값을 가져오는 예제입니다.

App.js

import './App.css';
import ContextApi from './Component/ContextApi';

function App() {
  return (
    <div >
        <h1 className="App-header">
          <ContextApi/>
        </h1>
        
    </div>
  );
}

export default App;

 

ContextApi.js

import React from 'react';
import Children from "./contextChildren";

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

class ContextApi extends React.Component {
    constructor(props) {
        super(props);
        this.setStateFunc = this.setStateFunc.bind(this);
    }
    
    setStateFunc(value) {
        this.setState({name: value});
    }

    render() {
        // ContextApi의 state, setStateFunc 할당
        const content = {
            ...this.state,
            setStateFunc: this.setStateFunc
        }

        return(
            <Provider value={content}>
                <Children />
            </Provider>
        )
    }
}

export default ContextApi;

 

contextChildren.js

버튼을 클릭하면, 파라미터로 전달받은 ContextApi 컴포넌트의 setStateFunc("코딩병원")을 호출합니다.

import React from 'react';
import { Consumer } from "./ContextApi";

class contextChildren extends React.Component {
    render() {
        return(
            <Consumer>
                {contextValue => 
                    <button onClick={e => contextValue.setStateFunc("코딩병원119")}>
                        {contextValue.name}_button    
                    </button>
                }
            </Consumer>
        )
    }
}

export default contextChildren;

 

실행 결과

버튼을 누르기 전 contextValue.name 값이 없어 버튼명이 _button으로 표시됩니다.

버튼을 누르면 변경된 ContextApi 컴포넌트의 state 변수 name 값인 코딩병원119를 가져오고 버튼명이 코딩병원119_button으로 표시됩니다.