[DAY - 83] context

context

 

https://ko.legacy.reactjs.org/docs/context.html

Context – React

기존 방식

 

기존엔 컴포넌트끼리 같은 props, state를 사용하려면 공통 부모에서 관리를 해야 했다.

만약 자식 컴포넌트들이 많아지고 복잡해진다면 관리하기 어려울 것이다.

 

 

context

 

하지만 context를 사용하면 부모-자식 관계를 따질 필요 없이 전역 데이터를 저장해 해당 데이터가 필요한 컴포넌트에서 불러올 수 있다.

 

import { createContext, useState } from "react";

// 1) 관리자 생성
export const ColorContext = createContext();

// 2) 변수명 변경       4) props
const ColorProvider = (props) => {
    // 6) 모든 state, function 작성
    const [color, setColor] = useState('tan')
    const onRed =()=> setColor('red')
    const onGreen =()=> setColor('green')
    const onBlue =()=> setColor('blue')
    const onBlack =()=> setColor('black')
    return (
        // 3) 공급자
        <ColorContext.Provider value={{color, onRed, onGreen, onBlue, onBlack}}>
            {/* 컴포넌트 안에 컬러 디자인 */}
            {/* 5) props.children */}
            {props.children}
        </ColorContext.Provider>
    );
};

export default ColorProvider;

 

1) context 관리자를 만들어 준다.

2) context 관리자와 변수명이 같지 않도록 컴포넌트 명을 변경해 준다.

3) context 공급자 provider에 value를 넣는다.

4) 매개변수 props를 넣고

5) 공급자 안에 props.children을 추가해 준다.

 

import React, { useContext } from 'react';
import { ColorContext } from '../../contexts/ColorContext';

const Color = () => {
    const {color, onRed, onGreen, onBlue, onBlack} = useContext(ColorContext)
    return (
        <div>
            <h2 style={{color:color}}>Design Color : {color}</h2>
            <p>
                <button onClick={onRed}>Red</button>
                <button onClick={onGreen}>Green</button>
                <button onClick={onBlue}>Blue</button>
                <button onClick={onBlack}>Black</button>
            </p>
        </div>
    );
};

export default Color;

 

그 뒤 화면에 출력될 Color 컴포넌트에서 value를 비구조할당으로 받아온다.

return문 안에서 값을 표시하고, 함수를 위치에 맞게 작성해 준다.

 

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

 

App.js에선 출력될 컴포넌트를 해당 Provider로 감싸준다. 이렇게 해주어야 Color 컴포넌트에서 값을 받아올 수 있다.