React - Context API

Context.jsx

import React from 'react'

function Child({text}){
    return <div>HI{text}</div>
}

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

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

function Context({text}){
    return <GrandParent text="GOOD"/>
}

export default Context

복잡한 구조.. -> Context API 사용하자!

Context API

컴포넌트를 여러개 거쳐서 전달하는 상황 -> Context API를 이용하여 간단하게 구현 할 수 있음.
프로젝트 안에서 전역적으로 사용할 수 있는 값을 관리함.

createContext

context 객체 생성
createContext 함수 호출 시 Provider와 Consumer 컴포넌트 반환
initialValue는 Provider를 사용하지 않았을때 적용될 초기값을 의미

createContext(initialValue)

useContext

생성된 context를 컴포넌트에 전달받음
context의 변화를 감시
설정한 상태를 불러옴

const data = userContext(Context)

Context.jsx

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

const MyContext = createContext('defaultValue');

function Child(){
    const text = useContext(MyContext);
    return <div>HI{text}</div>
}

function Parent(){
    return <Child/>
}

function GrandParent(){
    return <Parent/>
}

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

export default Context

const MyContext = createContext('defaultValue'); // createContext로 만들어진 변수 (MyContext)는 컴포넌트 처럼 쓰임

<MyContext.Provider value = "GOOD!"> //createContext로 만들어준 컴포넌트에는 Provider 프로퍼티가 들어있음. provider 프로퍼티를 통해 value값 설정.

useContext - 유동적으로

useState를 사용하여 유동적으로 변하는 기능을 추가함.

Context.jsx

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

const MyContext = createContext('defaultValue');

function Child(){
    const text = useContext(MyContext);
    return <div>HI{text}</div>
}

function Parent(){
    return <Child/>
}

function GrandParent(){
    return <Parent/>
}

function Context(){
    const [value, setValue] = useState(true);

    return <MyContext.Provider value = {value ? "Good" : "Bad"}>
                <GrandParent/>
                <button onClick={() => setValue(!value)}>click!</button>
            </MyContext.Provider>
}

export default Context

출처 :
Context API 를 사용한 전역 값 관리
[React] 리액트 Hooks : useContext() 함수 사용법 (전역 상태 관리)