Context API 란?

보통 props를 통해 상위 컴포넌트가 하위 컴포넌트한테 데이터를 전달을 한다. 이를 props drilling이라고 하는데 잘못하면 불필요한 컴포넌트의 리렌더링까지 일으 킬 수 있다. 이를 위헤 전역적으로 데이터를 관리할 수 가 있는데 스토어를 사용하거나 context API를 사용해서 데이터를 전역적으로 관리할 수 있다.

그렇다면 스토어를 사용해야할때와 context API를 사용해야할떄는 언제인가?

간단한 테마(토글로 dark,light모드) 혹은 로그인 상태 혹은 locale와 같은 단순하지만 자주 변하지 않는 값들을 전역적으로 관리할때는 Context를 사용하는것이 좋다. 반면에 비즈니스로직이라던지 복잡하거나 잦은 상태로 데이터가 변경이 되는 경우라면 스토어를 사용하는것을 권장한다.

Context API의 사용예제

1. color에 대한 Context를 만든다.

const ColorContext = createContext({
    state: {color: 'blue', subColor: 'red'},
    actions: {
        setColor: (color: string) => {
        },
        setSubColor: (subColor: string) => {
        }
    }
});

export default ColorContext;

2. Context Provider를 생성한다.
   -> ColorProvider는 상태를 직접 관리하고, 이 상태와 업데이트 함수를 value로 묶어 하위 컴포넌트에 제공하는 역할을 합니다.

import ColorContext from "../contexts/color";
import ColorConsumer from "./ColorConsumer";
import {useState} from "react";

const RANDOM_COLORS = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
const RANDOM_SUB_COLORS = ['pink', 'cyan', 'lime', 'teal', 'lavender', 'brown', 'gray'];

const ColorProvider = () => {
    const [color, setColor] = useState({color: 'orange', subColor: 'blue'});
    const value = {
        state: color,
        actions: {
            setColor: () => {
                const color = RANDOM_COLORS[Math.floor(Math.random() * RANDOM_COLORS.length)];
                setColor(prev => ({...prev, color}));
            },
            setSubColor: () => {
                const subColor = RANDOM_SUB_COLORS[Math.floor(Math.random() * RANDOM_SUB_COLORS.length)];
                setColor(prev => ({...prev, subColor}));
            }
        }
    };


    return (
        <>
            <ColorContext.Provider value={value}>
                {/* 자식 컴포넌트들 */}
                <ColorConsumer/>
            </ColorContext.Provider>
        </>
    )
}


export default ColorProvider;

3. Context.Consumer를 생성한다.
   -> ColorConsumer 컴포넌트는 useContext Hook을 사용하여 Provider가 제공한 값을 구독하고 소비합니다.

import ColorContext from "../contexts/color";
import {useContext} from "react";

const ColorConsumer = () => {
    // <ColorContext.Consumer></ColorContext.Consumer> 방식 대신 useContext 훅을 사용
    const {state, actions} = useContext(ColorContext);

    return (
        <>
            <div>
                <h1 style={{color: state.color}}>This is the main color</h1>
                <h2 style={{color: state.subColor}}>This is the sub color</h2>
                <button onClick={actions.setColor}>Change Color</button>
                <button onClick={actions.setSubColor}>Change Sub Color</button>
            </div>

        </>
    )
}


export default ColorConsumer;