7. React와 함께 TypeScript 사용하기(6), [ Context ]

< createContext >

    import { useState } from "react";
    import { createContext } from "react";

    const msContext = createContext<{ name: string; addTodo: (textId: string) => void; }>(
        {
        name: "ms",
        addTodo: (textId) => {
            return textId;
        },
    });

    export const msContextProvider: React.FC<{ children: React.ReactNode }> = (props) => {
        const [name, setName] = useState("");

        const addTodo = (textId: string) => {
            return textId;
        };

        const context: { name: string; addTodo: (textId: string) => string;} = {
            name: name,
            addTodo: addTodo,
        };

        return (
            <msContext.Provider value={context}> 
                {props.children}
            </msContext.Provider>
        );
    };

    export default msContext


// 이후에, App.js 감싸고, 컴포넌트에서 사용하면 된다.

// 사용은 평소대로, 필요한 것이 있다면, 마우스를 위로 살포시 올려보자. 알려줄 것이다.