230125 React Context API

리액트 Context API

Redux와 비슷

 

 

useReducer와 차이

전역변수로 사용 가능

 

Context 참고 https://ko.reactjs.org/docs/context.html

Context – React

Context는 리액트 컴포넌트 간에 어떠한 값을 공유할 수 있게 해주는 기능임.

주로 Context는 전역적(global)으로 필요한 값을 다룰 때 사용한다.

Props로만 데이터를 전달하는 것은 한계가 있다.
리액트에서는 일반적으로 컴포넌트에 데이터를 전달할 때 Props를 통해 전달한다.
그런데, 이 컴포넌트의 형태가 복잡하다면?
=>가령, APP.js에서 나뉘어진 컴포넌트의 자식들끼리 정보를 공유해야 한다면?
=>Context API 또는 Redux를 사용하여 공통(전역)으로 사용하는 데이터를 외부에서 편리하게 사용할 수 있다.

 

App.js

import { useState } from "react";
import ColorComponent from "./component3/ColorComponent";
import ColorContext from "./contexts/ContextAPI";

const App = () => {

    /*
    p.495


    1. ContextAPI 외부에 선언 createContext() 훅사용
    2. 자식 컴포넌트 consumer로 데이터를 받기
    3. 부모 컴포넌트 provider로 데이터를 전달(or 변경)
    */

    //select태그를 만들어서 useState를 활용해서 color값을 변경
    const [data,setData]=useState('red');

    const handleChange=(e)=>{
        setData(e.target.value);
    }


    return (
        <ColorContext.Provider value={{color:data}}> {/* value는 props */}
        {/* Provider는 사용할 root컴포넌트에 선언합니다. */}
            <ColorComponent/> 
            <select onChange={handleChange}>
                <option>blue</option>
                <option>green</option>
                <option>teal</option>
                <option>yellow</option>
                <option>black</option>
            </select>

        </ColorContext.Provider>
    )
}

export default App;

---

ContextAPI.js

import { createContext } from "react";

//컨텍스트의 기본상태 지정
const ColorContext=createContext({color:'red'})

export default ColorContext;

---

ColorComponent.js

import { Fragment } from "react";
import ColorContext from "../contexts/ContextAPI";

const ColorComponent=()=>{
    return(
        <Fragment>
            <ColorContext.Consumer>
            {/* 사용할 곳:Consumer-함수의 return구문에 화면을 처리할 내용을 작성함 */}
                {(value)=>
                    <div style={{background:value.color}}>
                        ContextAPI의 사용<br/>
                        값: {value.color}
                    </div>
                }
            </ColorContext.Consumer>
        </Fragment>
    )
}

export default ColorComponent;

select태그의 값이 변경되면 state가 변경됨. provider-consumer로 context가 변경됨.