[프론트앤드] REACT Context API [2]

728x90

이전 글

2022.03.30 - [프론트엔드/React] - [프론트엔드] REACT Context API [1]

context api 사용법 익히기

먼저 튜토리얼 프로젝트를 아래 명령어로 생성해주자.

yarn create react-app context-tutorial

새 Context 만들기

프로젝트가 생성되었으면 새로운 Context를 만들어보자.

src/contexts/color.js

contextx 디렉토리 생성 후 아래의 color.js 파일을 만든다.

- color.js

import { createContext } from 'react'

// createContext() -> Context 제작
const ColorContext = createContext({ color: 'black'});

export default ColorContext;

Consumer 사용하기

이번에는 아래와 같이 다시 src 하단의 components 디렉토리 ColorBox 파일을 만들어주자.

components/ColorBox.js

- ColorBox.js

import React from 'react';
import ColorContext from '../contexts/color';

// Consumer 컴포넌트를 통해 색상 조회
const ColorBox = () => {
    return (
        // Funtion as child patten, Render Props
        <ColorContext.Consumer>
            {
                (value) => (
                    <div
                        style={{
                            width: "64px",
                            height: "64px",
                            background: value.color
                        }}/>
                )
            }
        </ColorContext.Consumer>
    );
};

export default ColorBox;

다 만들었으면 이제 App.js 파일을 수정해서 랜더링해주자.

- App.js

import React from "react";
import ColorBox from "./components/ColorBox";

const App = () => {
  return (
    <div>
      <ColorBox/>
    </div>
  );
};

export default App;

주의사항

dom 버전 문제가 발생할 경우 react-dom 버전을 아래와 같이 변경해줘야 한다

yarn add react-dom@16.8.0

화면 결과

프로젝트를 실행해서 아래와 같이 style 컬러있으면 성공.