コンポーネント設計について
Q&A
解決したいこと
コンポーネント設計について。
あるデータを表示するコンポーネントを作ろうとしています。
受け取ったデータを元に集計し、結果を表やグラフにする類のものです。
データは API から受け取ることになります。
そのとき、データの取得はどこですべきかというのが悩んでいる問題です。
方法1：
コンポーネントはデータを受け取って表示する。
APIとの通信は、このコンポーネントを使う親のコンポーネントに任せます。
方法2：
コンポーネントは id や key のようなものを受け取り、
コンポーネント内で API と通信し、受け取ったデータを表示する。
1 にすると、使うときに単純にこのコンポーネントだけを使うわけにはいかず、 API を呼び出す部分も行わないといけません。
使いやすさからすると 2 だと思います。
ウェブ標準の HTML タグである img や video を考えると、 URL を渡せば表示してくれるので、これも 2 だと思います。
しかし、 2 にすると外部通信も集計も 1 つのコンポーネントにまとまるので、複雑化しテストもしづらいように思います。
どちらのほうが良いでしょうか？
なお、フレームワークについては、特に固定しません。
WebComponent、 React、 Vue などどれかに固定せず一般的なコンポーネント化する際の考え方についてです。
もし、フレームワークによって最適解が異なるのであれば、それも合わせてお教えいただけると助かります。
0 likes
