[React] Context API 를 사용한 전역 값 관리

✅ Context API 를 사용한 전역 값 관리

우리는 지금까지 자식의 자식의 자식의 컴포넌트에서 부모 컴포넌트에 있는 값을 사용하려면 props의 props의 props로 넘겨받아 사용함. 하지만 Context API와 dispatch를 사용하면 원하는 컴포넌트에게 바로 전달 가능

👁 Context를 사용하지 않는 경우 예시

function A({text}) {
	return <div>여기 {text}</div>
}
function B({text}) {
	return <A text={text}/>
}
function C({text}) {
	return <B text={text}/>
}
function Friend() {
	return <C text="지우개" />
}

위 코드의 결과값은 여기 지우개다
이 경우, B, C는 지우개를 쓰지도 않는데, A에게 전달해 주기 위해 거쳐가는 Component들임

👉 1. Context 만들기

import { createContext } from 'react';

const ColorContext = createContext({ color:'black' })

export default ColorContext;

Context 는 리액트에서 제공해주는, createContext 라는 함수를 사용해서 만든다.

👉 2. Provider

<ColorContext.Provider value ={{ color:'red' }}>
<div>
  <ColorBox />
</div>
</ColorContext.Provider>

Provider는 하위에 있는 컴포넌트 에게 Value Props을 전달한다.

Provider때문에 ColorContext 를 구독하는 모든 컴포넌트는 Provider Value Prop이 바뀔 때마다 다시 렌더링 된다. (최적화 이슈)

👉 3. useContext 사용

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

const ColorBox = () => {
    const color = useContext(ColorContext);
    return (
    <>
      <div>색상: {color}</div>  
    </>
  );
};

리액트의 Hooks 중 에서 useContext 훅을 사용하면 함수형 컴포넌트 에서 Context 를 아주 간편하게 사용할 수 있다.

👁 Context 사용

import {createContext, useContext} from 'react';

const MyContext = createContext('물건');

function A() {
    const text = useContext(MyContext);
	return <div>여기 {text}</div>	// 여기 지우개
}
function B() {
	return <A/>
}
function C() {
	return <B/>
}
function Friend() {
	return (
      	  <MyContext.Provider value="지우개">
      			<C/>
            </MyContext.Provider>
    );
}

이렇게하면 B, C를 거쳐 A가 렌더링 되긴 하지만 props까지 거쳐오진 않음

• 친구가 지우개 빌려달라는데 빌려주기 싫을 경우

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

const MyContext = createContext('물건');

function A() {
    const text = useContext(MyContext);
	return <div> {text} </div>
}
function B() {
	return <A/>
}
function C() {
	return <B/>
}
function Friend() {
    const [borrow, setBorrow] = useState(true);
	return (
      <MyContext.Provider value={borrow ? '지우개' : '싫어'}>
      	<C/>
      	<button onClick={() => setBorrow(!borrow)}>BUTTON</button>
      </MyContext.Provider>
    );
}

이런식으로 useState를 적절히 활용하면, 버튼을 클릭할 때마다 싫다는 텍스트 표출됨