쇼핑몰을 사이트이다.
- 상품이 나열되어서 뷰포트에 출력.
- 상품을 클릭 시 상품 상세페이지로 이동.
- 상품의 +아이콘 클릭 시 장바구니에 추가되고 장바구니 영역에 제품썸네일, 가격, 갯수가 출력.
- 장바구니에 -아이콘 클릭 시 장바구니에서 상품 삭제
- 장바구니에 담겨져 있는 전체 가격 출력.
- 전체 가격 옆에 휴지통 아이콘 클릭 시 장바구니 전체 삭제
| 스킬 | 내용 |
|---|---|
| useState | react-hook, function component안에서 state를 자유롭게 사용하게 된다. |
| useMemo | 불필요한 랜더링이 되지 않도록 설정 |
| useCallback | 불필요한 랜더링이 되지 않도록 설정 |
| createContext | Context객체를 만들어 구독하고 있는 컴포넌트를 설정하여 데이터를 전달 |
| Provider | context의 value, 즉 데이터를 설정하여 전달하는 역할 |