[프론트엔드] REACT Context API [3]

이전 글

• 2022.03.30 - [프론트엔드/React] - [프론트앤드] REACT Context API [2]

 

Provider 적용

이번에는 Provider를 사용하여 Context value 값이 변경되도록 구현 할 예정이다.

 

App 컴포넌트를 먼저 다음과 같이 수정한다.

 

- App.js

Provider 안에 value 값을 지정해주지 않으면 dom이 동작하지 않으니 주의하자.

import React from "react";
import ColorBox from "./components/ColorBox";
import ColorContext from "./contexts/color";

const App = () => {

    return (
        <ColorContext.Provider value={{ color: 'green'}}>
            <div>
                <ColorBox/>
            </div>
        </ColorContext.Provider>
    );
};

export default App;

 

주의사항

react-dom 버전이 17.x.x 버전이하로 내려가면 Provider 컴포넌트 자체가 안먹히는 이슈가 있다.

아직 버전관련해서 이슈가 다수 있는것으로 보여 프로젝트 진행 시 반드시 확인이 필요할 것 같다. 

 

화면 결과

 

컬러 값이 아래와 같이 바뀌면 성공