border style (inset)

border: inset 6px skyblue;

react-router-dom

라우팅(Routing)
다른 주소에 따라 다른 뷰를 보여주는 과정(경로에 따라 변경 한다.)

React Router의 주요 컴포넌트

<BrowserRowter> // Router의 역할을 한다.
<Switch> // 경로를 매칭해준다. Router 태그를 감싸주는 역할
<Route> // 경로를 매칭해준다.
<Link> // 경로를 변경한다.

Switch 컴포넌트
1. 여러 Router컴포넌트를 감싸서 그 중 경로가 일치 하는 단 하나의 Router만 랜더링 시켜주는 역할을 한다.
2. Switch를 사용하지 않으면 매칭되는 모든 요소를 랜더링한다.

Router 컴포넌트
1. Path 속성을 지정하여 해당 Path에 어떤 컴포넌트를 보여줄지 정한다.
2. 첫 Router 컴포넌트의 Path를 지정할때는 exact를 써줘야한다.
(메인화면 경로는 다른 라우트 컴포넌트 Path에도 지정되기때문에 exact를 꼭 지정해줘야 다른 페이지로 넘어 갈 수 있다. 만약 지정하지 않으면 다른 페이지로 넘어가지 않고 처음에 지정된 경로만 보여주게 된다.)
3. Link 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동한다.

Link 컴포넌트
1. 경로를 연결해주는 역할을 하는 컴포넌트
2. 페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 HTML5 history API를 이용하여 페이지의 주소만 병경을 해준다.

import
필요한 모듈을 불러오는 역할로 비구조화 할당(destructuring assignment)과 비슷하게 이용 할 수 있다.

a 태그가 아닌 Link 태그를 사용하는 이유
a 태그는 페이지를 전환하는 과정에서 페이지를 불러오기 때문에 다시 처음부터 랜더링 한다(새로고침)

Link 컴포넌트는 페이지를 전환 방지하는 기능이 내장되어 있어서 SPA를 구현 할 수있다.

cartItem component input(checkbox) 구현

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(checkbox) 구현

cartItem checkbox 구현

input 태그

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

checked 옵션

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

checked 속성은 페이지가 로드될 때 미리 선택될 <input> 요소를 명시한다

checked 속성은 불리언(boolean) 속성이다

불리언 속성은 해당 속성을 명시하지 않으면 속성값이 자동으로 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

shoppingCart checkbox 구현

cartItem input 구현과 비슷 하다

<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([]);
    }
  };

checked가 true면,

checkedItem의 배열을 cartItem의 itemId로 바꿔 주어 배열에 넣어준다

checkedItem에 배열이 없으면 모두 unchecked 된상태
checkedItem에 배열에 요소가 있으면 checked 된 상태

checked가 flase면,

checkedItem의 배열을 빈배열로 만들어준다
모두 unchecked 상태로 만들어준다