15장 Context API

15.1 Context API를 사용한 전역 상태 관리 흐름 이해하기

15.2 Context API 사용법 익히기

15.2.1 새 Context 만들기

import {createContext} from 'react';

const TestContext = createContext({data: 'black'});

export default TestContext;

 

15.2.2 Consumer 사용하기

import React from "react";
import TestContext from "../context/test";

const TestBox = () => {
    return (
        <TestContext.Consumer>
            {value =>(
            	<div>value.data</div>
            )}
        </TestContext.Consumer>
    );
};

export default TestBox;

15.2.3 Provider

Provider를 사용하여 Context value 변경

import React from 'react';
import TestContext from "./context/Test";

function App() {
    return (
        <TestContext.Provider value={{data:'red'}}>
			...
        </TestContext.Provider>
    );
}

export default App;

15.3 동적 Context 사용하기

15.4 Consumer 대신 Hook 또는 static contextType 사용하기

15.4.1 useContext Hook 사용하기

children에 함수를 전달하는 Render Props 패턴이 불편하다면, useContext Hook을 사용하여 훨씬 편하게 Context 값을 조회할 수 있음.

15.4.2 static contextType 사용하기

클래스형 컴포넌트에서 Context를 좀더 쉽게 사용하고 싶다면 static contextType을 정의하는 방법이 있음.