useReducerとuseContext

##useContextとは？
以下の画像が分かりやすいが、わざわざpropsでバケツリレーをしなくても一気に下までもってける。

これを見るとuseContext単体で使用するときは、return ()内で使いたい場合が便利。
関数やset~~~とかを使いたいときは少し不便。

##useReducerとは？
https://qiita.com/seira/items/2fbad56e84bda885c84c

ここにすべてが書いてあるが、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する

const { state, dispatch } = useContext(CardContext)
で子ファイルに呼び出し