簡単なtodoアプリでコンポネーネント間でデータの受け渡しをしました。reactはコンポネーネントという部品を連結させてwebページに動的な動きをつけます。複数のコンポーネントで構成するのですが、この複数のコンポーネントは親子関係をそれぞれのコンポーネントで持ちます。まず最初に一番親であるコンポーネントを作成して、そのコンポーネントで返す仮想DOMツリーの要素の中に子コンポーネントを呼び出します。その際に子コンポーネントを呼び出す記述のところに渡したいデータを記述することで子コンポーネント内のpropsで受け取ることができます。一つのコンポーネントで全部を記述することもできるのですが複数のコンポーネントを作成してそれを組み合わせることが一般的です。ではなぜそのような方式が取られるのでしょうか。
複数のコンポーネントに分ける理由
機能ごとで分けた方が修正する時に楽
一つのコンポーネントでプログラムを書いてしまうとエラーがおきた場合にどの時点でエラーが起きているのか探すのが大変です。これは時間的コストも認知的コストもかかって効率がとても悪くなってしまうのです。機能ごとでコードを分けた場合にはその機能ごとでメンテナンスをすることができるので対象を絞ることができ、修正するスピードが速いのです。
コードが見やすい
一つのコンポーネントだと単純にコードが長くなってしまうので効率が悪いのです。
パッケージ管理
上のと関係ないのですがパッケージのことも学んだのでまとめます。reactではパッケージ管理ソフトからファイルをダウンロードしてアプリケーションを作成します。そもそもパッケージとはどのアプリケーションでも共通で使うプログラムをいちいち記述する必要が内容にファイルにまとめてそのファイルを読み込無ことで簡単に処理を実装することが可能になります。そのパッケージを管理するソフトウェアにnpmを使っていまして、そのパッケージ管理ソフトをダウンロードすることによって使えるようになるコマンドを実行することでそのソフトで管理しているパッケージのプログラムをダウンロードして使うことができるのです。importの記述で読み込無ことでその読み込んだパッケージ内で定義されているメソッドを読み込んだファイル内で使うことができるようになり、効率的にプログラムを書くことができます。
まとめ
今のところこの程度の理解なのですがやっていくうちにどんどん理解していきたいと思います。とりあえず今やっているtodoリストを1から作り直してみて、次はカレンダーのアプリを作っていきたいと思います。
