suk3952111 / todolist

0 stars 0 forks source link

장바구니 피드백 #15

Open DevelopSoo opened 4 months ago

DevelopSoo commented 4 months ago

질문)아 ㅠㅠㅠ 지금 로그인한 유저의 정보 state에 담아두고 로그인 로그아웃 기능을 포함하는 useAuth를 처음에는 useCotext에 담아두지 않고 모든 컴포넌트에서 import 해서 사용했더니 유저의 정보 state변경될 때, 화면이 다시 렌더링이 되지 않았습니다 ㅠㅠ useCotext넣어서 state를 업데이트 하니 그제서야 state가 변경될때 렌더링이 다시 되더라고요 ㅠㅠ 왜 그럴까요 ㅠㅠ

state가 화면을 변경하는 역할을 하는데, useAuth를 각각 컴포넌트에 import하면 state는 이름만 똑같지 다른 state가 됩니다. 그래서 각 컴포넌트 내부에서만 변경되고 다른 곳으로 이동되면 변경된 값이 반영되지 않습니다.

DevelopSoo commented 4 months ago
  1. 굳이 필요없겠네요. https://github.com/suk3952111/todolist/blob/7eccb511d46d1a0533b3fb4636cdc2451dc16004/src/components/Header.jsx#L21

  2. && 연산자 쓰면 될 것 같습니다. https://github.com/suk3952111/todolist/blob/7eccb511d46d1a0533b3fb4636cdc2451dc16004/src/components/Header.jsx#L48-L50

  3. find 메소드 활용하는 것이 더 간단해보이지 않을까 싶습니다.

    const updateCart = (cartItemToAdd) => {
    const userData = JSON.parse(localStorage.getItem("user")) || {};
    const cart = userData.cart || [];
    
    const existingCartItem = cart.find(item => item.id === cartItemToAdd.id);
    
    if (existingCartItem) {
    existingCartItem.number = cartItemToAdd.number;
    } else {
    cart.push(cartItemToAdd);
    }
    
    userData.cart = cart;
    updateUser({ ...userData });
    localStorage.setItem("user", JSON.stringify(userData));
    };
  4. user와 cart를 분리하는 것도 괜찮을 것 같네요. 나중에 db 구조도 간단하게 알려드리겠습니다.