리액트 Context API를 사용한 전역관리

이전에 구현한 App 컴퍼넌트 내부에서 onToggle과 onRemove가 구현된 다음에 UserList로 전달된 상태이다.

그리고 UserList는 onRemove와 onToggle을 받아와서 User 컴포넌트에게 전달 했다. User 컴포넌트 역시 onRemove와 onToggle을 받아와서 사용된다.

여기서 잘 보면 UserList는 사실상 다리 역할만 하고 있는 셈이다. UserList에서 onRemove와 onToggle은 직접 사용되는 것이 아니라 User 컴포넌트에게 전달하는 것 뿐이다.

Context API를 이용하면 다리를 만들어서 전달할 필요없이 직접 props를 전달하게 된다.

실습해보자
ContextSample.js를 만들어서 실행한다.

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


function Child({text}) {
    return <div> 안녕하세요? {text}</div>
}


function Parent({text}){
    return <Child text ={text}/>
}

function GrandParent({text}){
    return <Parent text={text}/>
}

function ContextSample() {
    return <GrandParent text='GOOD'/>
}

export default ContextSample;

내용을 보면 ContextSample에서의 text값인 Good을 GrandParent의 text props로 전송하고, 그것을 다시 Parent에, 마지막으로 Child에 보내져서 해당 DOM이 렌더링 되는 것이다.

GrandParent의 props를 Child에게 직접 전송하게 하려면 먼저 createContext 를 생성한다.

const MyContext = createContext('defaultValue');

그다음 Child에서 받아오는 text 대신 다음과 같이 수정한다.

function Child() {
    const text = useContext(MyContext)
    return <div> 안녕하세요? {text}</div>
}

useContext는 Context에 있는 값을 읽어와서 사용할수 있게 해주는 훅이다.

따라서 Child는 MyContext에 있는 'defaultValue'라는 텍스트를 props로 가져오게 되는 것이다.

만약 MyContext의 값을 지정해주고 싶다면, Provider라는 컴퍼넌트를 사용해야한다.
전달받는 props의 최상위 컴퍼넌트로 가서

function ContextSample() {
    return(
        <MyContext.Provider value="GOOD">
        <GrandParent/>
        </MyContext.Provider>
    ) 
}

Provider컴퍼넌트 안에 바로 아랫층인GrandParent 를 집어 넣어준다. 이렇게 하면 GrandParent Parent Child에 적었던 {text} 를 전부 지워도 제대로 전송될 것이다.

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

const MyContext = createContext('defaultValue');


function Child() {
    const text = useContext(MyContext)
    return <div> 안녕하세요? {text}</div>
}


function Parent(){
    return <Child />
}

function GrandParent(){
    return <Parent />
}

function ContextSample() {
    return(
        <MyContext.Provider value="GOOD">
        <GrandParent/>
        </MyContext.Provider>
    ) 
}

export default ContextSample;