쇼핑몰프로젝트(10) - 장바구니 보완

어제까지만해도 잘 작동되다가 로그인 버튼을 누르니..
"object is not iterable (cannot read property Symbol(Symbol.iterator))"
이런 오류가 나왔다.

const obj = { a: 1, b: 2 };
const [a, b] = obj;  // Error 발생

const {a, b} = obj; // OK 통과!

JavaScript 에서 반복할 수 없는 객체에 대해 반복을 시도할 때 발생한다는데...
어제 블로그를 적으면서 수정한 코드는 useUser훅 뿐이라 한번 살펴보았다.

function useUser() {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const isLoggedIn = useSelector((state) => state.user.isLoggedIn);

  useEffect(() => {
    if (isLoggedIn) {
      navigate("/");
    }
  }, [isLoggedIn, navigate]);

  const loginUser = () => {
    dispatch(login());
  };

  return { isLoggedIn, loginUser }; // 수정했던 부분!
}

알고보니 Join.js 에서는 const { isLoggedIn, loginUser } = useUser(); 이렇게 구조 분해 할당을 수정 했지만 Login.js 에서는 수정하지 않아서 발생한 오류였다.😂😂

항상 오류는 알고보면 정말 별거 아닌 부분에서 나와서 해결하고나면 조금 허망하다 ㅠㅠ..

---

장바구니에서 선택 상품 주문 을 누르면 선택된 상품들만 order페이지에 뜨고, 주문하기 버튼을 누르면 전체 상품들이 order페이지에 뜨게 만들고 싶었다.

store.js 에서 reducer을 만지작거리다가 차라리 {selected : true} 인 객체들만 모아 새로운 state를 만들면 되지 않을까 라는 생각이 갑자기 스쳐갔다..!

알아보던 중 나온 것이 useNavigate에서 인수를 다르게 보낼 수 있다고 한다.

useNavigate함수

함수의 첫번째 인수는 이동할 경로(path)를 나타내고 두번째 인수는 이동할 때 함께 보낼 상태(state)나 쿼리 매개변수, 리다이렉트 후 돌아올 경로 등 추가옵션을 포함한 객체라고 한다.

항상 첫번째 인수로 이동할 경로만 사용했는데 두번째 인수에 대해 알게 되다니!!😆😆
프로젝트를 만들지 않고 혼자 강의들으며 공부했다면 전혀 몰랐을 것이다..ㅠㅠ

(Cart.js)

navigate("/order", { state: { items: selectedCartItems} });

우선은 "/order"로 이동할 때 selectedCartItems 라는 상태 정보를 전달한다.
그럼 Order.js에서 이 상태 정보를 사용하는 방법은 useLocation 훅을 사용하면 된다.

(Order.js)

import { useLocation } from "react-router-dom";

...

const location = useLocation();
const itemsToShow = location.state?.items || orderItems;

location.state?.items 는 Cart.js에서 navigate 함수로 전달한 item 상태를 참조한다.

그리고 그냥 주문하기 버튼을 누르면 장바구니의 모든 상품을 사용할 수 있게 해야하기 때문에 OR 연산자를 사용해서 location.state?.item이 없다면 orderItems를 사용할 수 있게 만들어야한다.