Context API

자식 컴포넌트에 데이터를 전송하려는데 자식 컴포넌트가 너무 많을 때(props를 많이 해야될 때) 사용한다.

context

• 하위 컴포넌트들이 props 없이도 부모의 값을 사용가능.
• context API를 사용하려면 Provide(데이터 제공)와 Consumer(데이터 사용)를 사용해야된다.

context API 기본 사용 방법

먼저 구조는 다음과 같다.

1. Home.tsx

// 1. createContext 가져오기
import React, { useState, createContext } from 'react';
import Detail from './pages/Detail';
import Item from './pages/Item';

// 2. 변수에 정의. export 한 이유는 다른 파일에서 데이터를 사용할 때 Context를 import해서 사용해야 되기 때문.
import React, {createContext, useState} from 'react';
import Detail from "./Detail";

export let testContext = createContext();

const Home = () => {
    let [item, setItem] = useState([10, 20, 30]);
    return (
        <div>
            <h1>App</h1>
            <testContext.Provider value={item}>
                <Detail />
            </testContext.Provider>
        </div>
    );
};

export default Home;

2. Detail.tsx

// 1. Context를 사용하기 위한 훅 가져오기
import {useContext, useEffect} from "react";
// 2. 사용할 Context 가져오기
import { testContext } from "./page";

const Detail = () => {
    // 3. Context에 지정한 데이터 중 가져올 데이터 정의
    let item = useContext(testContext);
    
    useEffect(() => {
        console.log(item); // 10, 20, 30
    }, []);
    
    return (
        <>
            Detail 컴포넌트.
            {item}
        </>
    )
}

export default Detail;

여러 데이터 보내기

// Home.tsx
import React, {createContext, useState} from 'react';
import Detail from "./Detail";

// 타입 따로 분리하기
interface IContext {
    data1: number[]
    data2: string
}

export let testContext = createContext<IContext>({
    data1: [],
    data2: ""
});

const Home = () => {
    let [item1, setItem] = useState([10, 20, 30]);
    let [item2, setItem2] = useState("두 번째 데이터");
    return (
        <div>
            <h1>App</h1>
            <testContext.Provider value={{
                data1: item1,
                data2: item2
            }}>
                <Detail />
            </testContext.Provider>
        </div>
    );
};

export default Home;

// Detail.tsx
// 1. Context를 사용하기 위한 훅 가져오기
import {useContext, useEffect} from "react";
// 2. 사용할 Context 가져오기
import { testContext } from "./page";

// 타입 따로 분리하기
interface IContext {
    data1: number[]
    data2: string
}

const Detail = () => {
    // 3. Context에 지정한 데이터 중 가져올 데이터 정의
    let data: IContext = useContext(testContext);

    useEffect(() => {
        console.log(data); // 10, 20, 30
    }, []);

    return (
        <>
            Detail 컴포넌트.
            {data.data1}
            {data.data2}
        </>
    )
}

export default Detail;