React (8) Context

■ Context란?

- 기존에 props를 이용하여 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 수 있었다.

- 단, 해당 데이터를 자식 컴포너트가 아닌 후손 컴포넌트에서만 필요로 하는 데이터라면 자식 컴포넌트에서 불필요하게 코드를 작성해줘야 하는데 이때 Context를 사용하면 데이터 공급자와 소비자를 정의하여 데이터가 필요한 컴포넌트만 사용할 수 있게 구현할 수 있다.

- Context를 사용하면 하위 컴포넌트가 여러 개인 구조에서 먼 후손 컴포넌트도 소비자를 import해서 필요한 데이터를 쓸 수 있다.

Props	Context
props는 부모 컴포넌트에서 직계자식 컴포넌트에게만 전달되는 데이터이다.	Context는 모든 컴포넌트에 전반적으로 영향을 끼칠 수 있다.

 

■ 예시

● App4.js

import './App.css'

import { ConextApi } from './09_Context'

function App4(){
    return(
        <ConextApi/>
    )
}

export default App4;

● 09_Context.js

import { useState, createContext } from "react";
import Children from "./ContextChildren1";

const MyContext = createContext();

function ConextApi(){
    
    const [name, setName] = useState('');

    const setStateFunc = (value) => {
        setName(value);
    }

    const content = {
        name, 
        setStateFunc
    }

    /*
        자식에게 넘겨줄 데이터의 상태값(name)과 상태값을 변경해줄 수 있는 함수를 넘겨주었다.
    */

    return(
        // 자식태그(Children)를 Provider로 감싸고 전달할 데이터는 value값으로 할당
        <MyContext.Provider value={content}>
            <Children/>
        </MyContext.Provider>
    )

}

export {ConextApi, MyContext};

● ContextChildren1.js (09_Context.js의 자손)

import Children2 from "./ContextChildren2";

function Children(){

    return <Children2/>

}

export default Children;

● ContextChildren2.js (ContextChildren1.js의 자손)

import { useContext } from "react"; // 부모 컴포넌트의 데이터를 사용하기 위해 필요한 함수
import { MyContext } from "./09_Context";
import Children3 from './ContextChildren3';

function Children2(){

    const contextValue = useContext(MyContext);

    return <Children3 />

}

export default Children2;

● ContextChildren3.js (ContextChildren2.js의 자손)

import { useContext } from "react";
import { MyContext } from "./09_Context";

function Children3(){

    const contextValue = useContext(MyContext);

    const handleClick = () => {
        contextValue.setStateFunc("자식 컴포넌트에서 부모 컴포넌트요소를 변경")
    }

    return(
        <button onClick={handleClick}>
            contextValue.name :: {contextValue.name}
        </button>
    )

}

export default Children3;

- 위와 같이 09_Context.js에서 전달한 상태값(name)과 상태값을 변경해줄 수 있는 함수를 후손인 ContextChildren3.js에서 사용할 수 있게 해주는 것이 Context이다.