nextjsとfirebaseでアプリを作成することになったので勉強のために
これからはじめるReact実践入門 ~コンポーネントの基本からNext.jsによるアプリ開発まで~
をやります。

その学習メモ

chatper3 コンポーネント開発（基本）

useState

state: State値を格納する変数
setState: State値を更新するための関数
initilaState: Stateの初期値

const [state, setState] = useState(initilaState)

コンポーネントが再描画されるタイミング

• Stateが更新された場合
• 渡されたPropsが変更された場合
• 親コンポーネントが再描画された場合

classnames ライブラリ

クラスの付け替えがいい感じに書ける

<div className={`box ${mode === 'light' ? 'light' : 'black'}`} />
=> こう書き換えれる
<div className={cn('box', {mode === 'light' ? 'light' : 'black'})} />
<div className={cn('box', {light: mode === 'light', dark: mode === 'dark'})} />

https://www.npmjs.com/package/classnames?activeTab=readme

chatper7 フックの活用

useEffect

statement: 再描画時に実行すべき処理
deps: 依存する変数（配列）

useEffect(() => {statement}, deps)

• depsを省略すると再描画時に必ずstatementが実行される
• depsを空配列[]にすると初回描画時のみstatementが実行される

useReducer

• ReducerとはState更新に利用する関数のこと
• dispatch関数に対してActionを渡すことで実行できる
  • ActionとはReducerに渡す指示書

reducer: Stateを更新するための関数
state: Stateの初期値

useReducer(reducer, state)

• 引数として現在のStateとActionを受け取る
• 戻り値として更新したStateを返すこと

name: Actionの型

dispatch({type: name, ...})

useContext

defalut: コンテキストの規定値

createContext(default)

コンテキストの初期化で作成されるもの

• コンテキストに値を引き渡すContext.Providerコンポーネント
• コンテキストの変更を受け取るContext.Consumerコンポーネント

context: Contextオブジェクト

useContext(context)

引数contextにはcreateContextオブジェクトで作成されたコンテキストを渡す