Context
なぜ学ぶか： 「ログインユーザーの情報を、深い階層の部品でも使いたい」— propsで5階層バケツリレーするのは大変です。Contextは「共有データの放送局」— 途中の階層を飛ばして届けられます。例で見てみましょう。
まずはこの例を見てみましょう
// ① チャンネルを作るconst ThemeContext = createContext("light"); // ② 放送局: 配下のすべてに theme を配るfunction App() { return ( <ThemeContext.Provider value="dark"> <DeepCard /> {/* 何階層深くてもOK */} </ThemeContext.Provider> );} // ③ 受信機: 途中の階層を飛ばして直接受け取るfunction DeepCard() { const theme = useContext(ThemeContext); return <p>現在のテーマ: {theme}</p>;}
間の階層はthemeを知らなくても、深い部品に直接届きます。これが「階層飛ばし」です。
Context＝propsを使わないデータ配布網
例のProvider（放送局）で値を配り、useContext（受信機）でどの深さからでも受け取ります。
使いどころは「全体で共有する少数のもの」
テーマ（ダークモード）・ログインユーザー・言語設定が三大定番。このアプリのテーマ切替も同じ発想です。
何でもContextは間違い
頻繁に変わるデータや、一部でしか使わないデータには不向きです。「まずリフトアップ、それが辛ければContext」の順で考えます。
ステップ 1 / 3
※ カリキュラムの内容はAIが生成しており、誤りが含まれる場合があります。正確な情報は公式ドキュメント等でご確認ください。