useContext - Hashimoto-Noriaki/react-calendar GitHub Wiki

//型の定義部分 この2つを セットでコンテキストに渡すための型
export type LoginUserContextType = {
    loginUser: LoginUserType;//loginUser: 現在ログインしているユーザーの情報（id, name）
    setLoginUser: (user: LoginUserType) => void;//setLoginUser: その情報を更新するための関数
}

//初期値は undefined（使うときに「Provider で囲まれていない」ミスを検出できる）createContextはグローバルに使える値を定義
//React の Context（共有データの仕組み）を定義して初期化している処理
export const LoginUserContext = createContext<LoginUserContextType | undefined>(undefined);

// LoginUserProvider 実際の状態（ユーザー情報）を管理し、アプリ全体に配布 
//LoginUserProvider とは？ React の コンポーネント
役割は：「ログイン中のユーザー情報を管理して、アプリ全体に共有するための親コンポーネント」
export const LoginUserProvider = ({ children }: { children: ReactNode }) => {
    const [loginUser, setLoginUser] = useState<LoginUserType>({
        id:0,
        name:"",
    });
}

<LoginUserContext.Provider value={ loginUser,setLoginUser}>
            {children}
        </LoginUserContext.Provider>

return

Reactの Context API を使って、loginUser と setLoginUser をアプリ全体に共有（提供）している処理です。

return (
  <LoginUserContext.Provider value={{ loginUser, setLoginUser }}>
    {children}
  </LoginUserContext.Provider>
);