210708. Today I Learned(TIL) : React Hooks 스프린트(C-Market) 리뷰

파일 구조

/
├── /React Custom Component
│   ├── README.md   
│   ├── /public               
│   └── /src                          
│        ├── /assets           
│        ├─── /components                
│        ├─── /pages
│        ├─── App.css
│        ├──  App.js     
│        ├── index.js 
│        ├── logo.svg       
│        ├── reportWebVitals.js
│		 ├── setupTests.js
├  package.json
└ .gitignore 

App.js(루트 컴포넌트)

const [items, setItems] = useState(initialState.items); // 구매할 수 있는 상품 목록의 상태
const [cartItems, setCartItems] = useState(initialState.cartItems); // 장바구니에 담은 상품 목록의 상태

• 위 두 가지 상태를 가지고 있음

• react-router-dom 라이브러리를 사용하고 있어 <Router>, <Switch>, <Route> 컴포넌트로 적절히 경로 분기를 시켜주어야 함.

• <Nav> 컴포넌트를 렌더링함. 네비게이션 바이며, 장바구니에 담긴 상품의 개수를 표시해야 하기 때문에 cartItems 배열을 프롭스로 넘겨주어야 함.

• <ItemListContainer> 컴포넌트를 렌더링함. 판매 중인 상품들을 표시하는 컨테이너

  • 상품을 하나씩 전부 렌더링 해야하기 때문에 items 배열을 프롭스로 넘겨주어야 함.
  • 컴포넌트 내에 있는 handleClick함수의 구현을 위해 cartItems 배열과 setCartItems 상태변경함수를 프롭스로 넘겨주어야 함.

• <ShoppingCart> 컴포넌트를 렌더링함.

  • const [checkedItems, setCheckedItems] = useState(cartItems.map((el) => el.itemId))

    체크박스 표시가 된 상품 목록의 상태를 가지고 있음.
  • handleCheckChange(checked, id) : 체크박스 표시가 된 상품들이 바뀔 때마다 'setCheckedItems'가 체크박스 표시가 된 상품들의 배열의 상태를 바꿔준다.
  • handleAllCheck(checked) : 전체선택 체크박스를 클릭했을 때 동작하는 함수
  • handleQuantityChange(quantity, itemId): 상품의 수량을 추가하거나 줄일 때 동작하는 함수
  • handleDelete(itemId): 장바구니에서 상품을 삭제할 때, 삭제버튼을 누르면 동작하는 함수
  • getTotal(): 상품의 가격을 총합산 해주는 함수