Section3 Unit4 [React] 상태 관리

---

Section3 Unit4 [React] 상태 관리

 

📌 Chapter1. 상태 관리

• 상태란, UI에 동적으로 표현될 데이터

• 로컬 상태는 특정 컴포넌트 안에서만 관리되는 상태로 보통 컴포넌트 내에서만 영향을 끼친다. 다른 컴포넌트와 데이터를 공유하지 않는 폼(form) 데이터는 대부분 로컬 상태로 input box, select box 등과 같이 입력값을 받는 경우가 이에 해당한다.

• 전역 상태는 프로덕트 전체 혹은 여러 가지 컴포넌트가 동시에 관리하는 상태로 서로 다른 컴포넌트가 동일한 상태를 다룬다면, 이 출처는 오직 한 곳이어야 한다. 만약 사본이 있다면, 두 데이터는 서로 동기화 되어야 하는데 이는 문제를 어렵게 만든다. 따라서 한 곳에서만 상태를 저장하고 접근하는 것이 중요하다.

 → 전역 상태 관리를 위해 많이 사용되는 툴로는 React Context, Redux 등이 있다. 

 → 상태 관리 툴은 전역 상태를 위한 저장소를 제공하고, props drilling의 문제를 해결하는 이점이 있다.

 

👀 npm trends를 보면, redux가 여전히 압도적으로 많이 사용됨을 알 수 있다.

 

📌 Chapter2. Props Drilling

Props Drilling과 상태관리에 대한 내용은 따로 정리를 해보았다. 

React의 Props Drilling과 상태관리

 

⭐️ 과제. Cmarket Hooks

✔️ Bare Minimum Requirement 

 ✅ react-router-dom을 이용해 Client Side Routing하는 방법을 학습합니다. 

 ✅ useState를 이용해 상태를 사용하는 방법을 학습합니다.

  • 쇼핑몰 애플리케이션의 주요 기능을 구현하세요.

    ✅ [장바구니 담기] 버튼을 이용해 장바구니에 해당 상품이 추가되도록 구현하세요.

    ✅ 장바구니 내 [삭제] 버튼을 이용해 장바구니의 상품이 제거되도록 구현하세요.

    ✅ 장바구니 내에서 각 아이템 개수를 변경할 수 있도록 구현하세요.

    ✅ 장바구니의 상품 개수의 변동이 생길 때마다, 상단 내비게이션 바에 상품 개수가 업데이트되도록 구현하세요.

 

✏️ 과제 구현 코드

 내가 작성했던 코드와 라이브 세션에서 작성했던 코드가 약간씩은 달랐다. 결국은 같은 기능을 구현하는 것이었지만, 여러 방식으로 구현이 가능했기 때문에 다양한 방법을 알게 되어서 좋았다.

 아래 코드는 내가 헷갈렸던 부분만 다시 정리해보았다. 가장 어려웠던 부분은 handleQuantityChange 였는데, quantity를 어떻게 바꾸어야 하는지 계속 고민을 했었던 것 같다.

 Redux에 들어가기 전에 Props로 상태를 전달하는 불편함을 느껴볼 수 있는 과제였다. 🙂

 

👩🏻‍💻 handleClick

const handleClick = (e, id) => { 

  const addItem = items.filter((item) => item.id === id)
  console.log("addItem", addItem);

  // 1. 첫번째 방법
  // some: 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 결괏값이 하나라도 true이면 true를 반환
  /*
  if ( !cartItems.some((item) => item.itemId === addItem[0].id) ) {
    setCartItems((prev) => [...prev, {
      itemId: id,
      quantity: 1
    }])
    setCount((prev) => prev + 1)
  }
  */
  

  // 2. 두번째 방법
  // findIndex: 전달받은 함수를 만족하는 배열 요소의 첫번째 요소의 인덱스를 반환. 만족하는 값이 없으면 -1을 반환.
  const idx = cartItems.findIndex((item) => item.itemId === id)
  
  // 장바구니에 아이템이 없는 경우(idx === -1) 아이템 추가
  // 장바구니에 아이템이 이미 들어있는 경우(idx !== -1) quantity 추가
  if (idx === -1) {
    setCartItems((prev) => [...prev, {
      itemId: addItem[0].id,
      quantity: 1
    }])
    setCount((prev) => prev + 1)
  } else {
    setCartItems([...cartItems]);
    cartItems[idx].quantity += 1
  }

  // 3. 단, 아래와 같이 작성하는 것은 X
  // 리액트에서 상태(state)를 변경할 때는 상태를 직접 수정하거나 변경하는 것은 권장되지 않는다.
  // push를 사용해 요소를 추가하는 것은 해당 배열의 상태를 직접 변경하므로 권장되지 않음
  /*
  if ( !cartItems.some((item) => item.itemId === addItem[0].id) ) {
    cartItems.push( {'itemId': id, 'quantity' : 1} );
    setCartItems(cartItems);
    setCount((prev) => prev + 1);
  }
  */
}

 

👩🏻‍💻 handleQuantityChange, handleDelete

const handleQuantityChange = (quantity, itemId) => {
  // console.log(quantity, itemId)

  // 내가 쓴 코드
  /*
  const updatedItems = [...cartItems];
  const idx = cartItems.findIndex((item) => item.itemId === itemId);
  updatedItems[idx].quantity = quantity;
  setCartItems(updatedItems)
  */

  // 라이브세션 코드
  setCartItems((oldItem) => 
    oldItem.map((item) => (item.itemId === itemId ? { ...item, quantity } : item))
  )
}

const handleDelete = (itemId) => {
  // 내가 쓴 코드
  setCartItems( cartItems.filter((item) => item.itemId !== itemId) )

  // 라이브세션 코드
  // reduce를 사용해서 delete 작업을 수행할 수도 있다!
  /*
  setCartItems((oldItem) => (
    oldItem.reduce((acc, item) => {
      // console.log("acc", acc, "item", item)
      return item.itemId === itemId ? acc : acc.concat([item])
    }, [])
  ))
  */

  setCheckedItems(checkedItems.filter((el) => el !== itemId))
  setCount((prev) => prev - 1)
}

 

---

🌙  오늘의 회고

 시간이 왜이렇게 빠른지 벌써 Redux를 학습하는 유닛까지 왔다. 본격적으로 리덕스를 학습하기 전에 리덕스가 왜 필요한지, Props Drilling이 얼마나 불편한지에 대해 실습하는 시간을 가졌다. 리덕스 문법이 익숙하지 않기는 하지만, 이번에 Cmarket 과제를 하며 state와 이벤트를 사용하기 위해 props로 여러번 전달을 하는데서 불편함을 많이 느꼈기 때문에 (이전에도 리액트를 공부하며 props를 여러 차례 전달하는 과정에서 불편함을 느끼곤 했다.) 리덕스가 이 불편함을 해소시켜줄 수 있기를 기대하는 중이다..!

 리덕스는 어떨까?! 궁금하니까 얼른 공부를 하러 가봐야겠다! 📚