useContextとは？
以下の画像が分かりやすいが、わざわざpropsでバケツリレーをしなくても一気に下までもってける。
これを見るとuseContext単体で使用するときは、return ()内で使いたい場合が便利。
関数やset~~~とかを使いたいときは少し不便。
useReducerとは？
ここにすべてが書いてあるが、Reduxみたいにaction, reducerを使ってuseStateを使う感じ。何がいいかって上のサイトの比較にも書かれてあるがグローバルで使えるところ。useContextと使うことで、useState(useReducerだけど)をグローバルに展開できるイメージ。
useContextとuseReducer
流れとしては以下の記事が分かりやすい。
1.React.createContextでContextを作成。
2.useReducerで使われる関数reducerを定義
3. useReducerを定義
4.<CardContext.Provider value={{ state, dispatch }}></CardContext.Provider>
でwrapする
5.
const { state, dispatch } = useContext(CardContext)
で子ファイルに呼び出し