39일차 2023-12-01 금요일 [React] 상태 관리

상태관리

전역 상태 관리

---

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

Side Effect

---

함수(또는 컴포넌트)의 입력 외에도 함수의 겨로가에 영향을 미치는 요인

ex) 네트워크 요청, API 호출

side effect를 최대한 배제하고 컴포넌트를 만든다

Props Drilling

---

상위 컴포넌트의 state를 props를 통해 전달하고자 하는 컴포넌트로 전달하기 위해 그 사이는 props를 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 데이터를 전달하는 현상을 의미

Props Drilling의 문제점

---

Props의 전달 횟수가 5회 이내로 많지 않다면 Props Drilling 은 큰 문제가 되지 않는다.

하지만 규모가 커지고 구조가 복잡해지면서 Props의 전달 과정이 늘어난다면 아래와 같은 문제가 발생

• 코드의 가독성이 매우 나빠지게 됩니다.
• 코드의 유지보수 또한 힘들어지게 됩니다.
• state 변경 시 Props 전달 과정에서 불필요하게 관여된 컴포넌트들 또한 리렌더링이 발생합니다. 따라서, 웹성능에 악영향을 줄 수 있습니다.

해결 방법

---

과도한 Props Drilling을 방지하기 위한 방법으로는 컴포넌트와 관련 있는 state는 될 수 있으면 가까이 유지하는 방법과 상태관리 라이브러리를 사용하는 방법

Cmarket Hooks

쇼핑몰 애플리케이션인 Cmarket에서 Hooks를 이용해 상태 관리를 해보는 것이 목표

Bare minimum requirements

• react-router-dom을 이용해 Client Side Routing하는 방법을 학습합니다.
• useState를 이용해 상태를 사용하는 방법을 학습합니다.
• 쇼핑몰 애플리케이션의 주요 기능을 구현하세요.
  • [장바구니 담기] 버튼을 이용해 장바구니에 해당 상품이 추가되도록 구현하세요.
  • 장바구니 내 [삭제] 버튼을 이용해 장바구니의 상품이 제거되도록 구현하세요.
  • 장바구니 내에서 각 아이템 개수를 변경할 수 있도록 구현하세요.
  • 장바구니의 상품 개수의 변동이 생길 때마다, 상단 내비게이션 바에 상품 개수가 업데이트되도록 구현하세요

APP.js

ItemListContainer.js

ShoppingCart.js