今回のプロジェクトでは、カタログ、ショッピングバスケット、購読および配送サイクル管理、コアコンポーネントページを作成しました.できるだけ早く機能を実現するために最善を尽くしましたが、まだまだ足りない点が多いので、1ページ1ページの良さと残念さを残したいと思います.

商品リストページ

(「見回す」をクリックしてスクロールするアニメーションもありますが、gif変換時の残留が多すぎて削除されました.)

構成部品

カタログページは、上図のように、大きく分けてタイトル、バナー、タイトル、次の商品に分けられ、それぞれ組み合わせられています.

API GET

まず,商品リストページに入るとカテゴリAPIの取得を要求し,これらのデータをcategoriesというstateに配列形式で入れ,配列メソッドmapを用いて4つの製品コンポーネントを作成した.
次に、各インデックスをpropsに渡します.

データフォーマットは大きく上記のカテゴリに分けられ、カテゴリ別に商品が並べられています.

データの活用

そこで受け取ったデータに基づいて、容量、カテゴリ名、価格などを記入しました.ここで印象深かったのは、製品の価格が「760.00」だったこと.

{Math.floor(category.price).toLocaleString()}원

小数点を放棄し、toLocaleString()メソッドを使用すると、次のような結果が得られます.

また、カテゴリ単位でMapを使用するとともに、Mapを使用してハードコーディングを低減することもできる.

データがキーワードとして配列にのみ提供される場合、

ここで問題になったのは、当初バックエンドと協議したデータが以下の通りである:
データフォーマットが突然変更されました
つまり,このように配列にはキーワードのみが含まれている.そこで,この問題をどのように解決するかを考えると,TAG DETAILSというオブジェクトを宣言し,そのオブジェクトのKey値をtagsの内容として指定した.

{TAG_DETAILS[list.tags]}

上のBracketNotationでアクセスしようとします.ただし,配列に1つの値しかない場合は可能であるが,2つの値であればこの方法は使用できず,配列の方法join()を用いて解決できることが考えられる.

{TAG_DETAILS[list.tags.join()]}

製品詳細ページへの接続

<Link to={`/productdetails/${list.id}`}>
                    <button>자세히</button>
                  </Link>

製品詳細ページへの接続は難しくありません.[その他](More)ボタンをクリックすると、リストが表示されます.詳細ページの後ろにidを貼り付けて送信し、詳細ページはuserParams()を使用して変数化し、各idに適合するAPIを要求する.

残念な点

できるだけ短い時間でページをリアルに表示するには、次のように製品の詳細をクリックして色を変更します.

受信した情報をimgUrlという状態で管理すると、同じ情報を持つ2つの状態(categories/imgUrl)が生成され、2つの状態の追加動作に合わせる必要があり、1つの状態で管理するとより良い.

<div
  key={list.id}
  className="categoryType"
  onClick={() => {
  setImgUrl(list.thumb);
  }}
 >

この部分では、最初は画像をレンダリングするためにimg urlを単独で管理するのが正しいと思っていましたが、その名の通り、同じ情報を持つstateを2つ使う必要はありません.今週再パッケージを行う場合は、親コンポーネントにhandleImgという関数を作成する必要があります.この関数は置き換えられ、propsに渡され、サブコンポーネントの使用方法で変更されます.