border style (inset)

border: inset 6px skyblue;

react-router-dom

ルーティング(Routing)
異なるアドレスに基づいて異なるビューを表示するプロセス(パスに基づいて変更).
React Routerのキー構成部品<BrowserRowter>//Routerの役を演じる.
一致パス<Switch>//Routerラベルを保護する役割
一致パス<Route>//
パスの変更<Link>//
スイッチコンポーネント
1.複数のRouter構成部品を囲み、1つのパスが一致するRouterのみをレンダリングします.
2.スイッチを使用しない場合は、一致するすべての要素をレンダリングします.
Router構成部品
1.Pathプロパティを指定し、そのPathに表示するコンポーネントを決定します.
2.最初のRouter構成部品のパスを指定する場合は、exactを使用します.
(メイン画面パスも他のルーティング素子パスに指定されているので、他のページにジャンプするにはdecisionを指定する必要があります.指定しないと他のページにジャンプせず、最初に指定したパスのみが表示されます.)
3.リンクコンポーネントが指定したURLパスに一致している場合にのみ機能します.
リンク構成部品
1.接続パスとして機能する構成部品
2.ページ切り替えでページを再ロードせずにアプリケーションを保持し、HTML 5 history APIを使用してページアドレスのみをスペルします.
import
ロードに必要なモジュールの役割として、非構造化割り当て(destructuring assignment)に類似することができます.aラベルではなくリンクラベルを使用する理由aタグは、ページ切り替え中にページがロードされるので、最初から登録を再開(リフレッシュ)Link 컴포넌트にページ切替防止機能を内蔵し、SPAを実現できる.

cartitem component inputの実装(チェックボックス)

useState

const [checkedItem, setCheckedItem] = useState(
    cartItems.map((el) => el.itemId)
  );

input,labelラベル

spanラベルでinput、labelラベルを囲む

<span className="cartItem_select_all">
	<input type="checkbox" />
	<label>전체선택</label>
</span>

divラベルを使用してCartItem componentをバインドする

<div className="cartItem_contain">
        {renderItems.map((item, idx) => {
          const quantity = cartItems.filter((el) => el.itemId === item.id)[0]
            .quantity;
          // console.log("quantity", quantity);
          return (
            <CartItem
              key={item.id}
              cartItem={cartItems}
              item={item}
              handledelete={handledelete}
              quantity={quantity}
            />
          );
        })}
</div>

このように分けて縛ってこそ整然としている.

Input(チェックボックス)実装

cartitemチェックボックスの実装

inputタグ

<input
        className="cartItem_checkBox"
        type="checkbox"
        checked={checkedItem.includes(item.id) ? true : false}
        onChange={(e) => handleCheckChange(e.target.checked, item.id)}
      />

チェックオプション

checked={checkedItem.includes(item.id) ? true : false}

checkedプロパティは、ページのロード時に予め選択された<input>要素を示します.
checkedプロパティはブールプロパティです
ブール属性プロパティプロパティプロパティが指定されていない場合、プロパティ値は自動的にfalseになり、指定されている場合は自動的にtrueになります.

const handleCheckChange = (checked, id) => {
    if (checked) {
    // 만약 checked 가 true이면
      setCheckedItem([...checkedItem, id]);
    } else {
     // ckecked 가 false 면
     setCheckedItem(checkedItem.filter((el) => el !== id));
    }
  };

checked={checkedItem.includes(item.id) ? true : false}
すなわち,checkedItem配列にはitemがある.idがある場合はtrue、ない場合はfalse
ステータスはtrue、ステータスがfalseの場合false

shoppingCartチェックボックスの実装

cartieminput実装と同様

<input
          type="checkbox"
          checked={checkedItem.length === cartItems.length ? true : false}
          onChange={(e) => handleAllCheck(e.target.checked)}
        />

HandleAllCheck実施

const handleAllCheck = (checked) => {
    if (checked) {
      setCheckedItem(cartItems.map((el) => el.itemId));
    } else {
      setCheckedItem([]);
    }
  };

チェックが本当なら、
checkedItemの配列をcartItemのitemIdに変換して配列に入れる
CheckedItemに配列がない場合、すべての配列が選択されていません.
配列に要素がある場合はcheckedItemが選択されています
格子なら、
checkedItemの配列を空の配列に変更
全員が選択されていない状態にする