나홀로 코딩-장바구니 구현(With Redux)

나홀로 코딩-장바구니 구현(With Redux)

아마존 클론 코딩 진행시 수월하게 클론 코딩했지만 스스로 코딩 구현할때는 실행이 잘 되지 않았습니다.
Redux도 다시 공부하기 위해 내용을 정리 해봅니다.

1. 폴더 구조 잡기

pages

• 페이지 단위의 컴포넌트 폴더로 구성
• ex) Login - Login.js, Login.scss / Main - Main.js, Main.scss
• 내 프로젝트 ⇒ List.js / Detail.js

components

• 공통 컴포넌트 관리 (Header, Footer, Nav 등)
• 내 프로젝트 ⇒ ProductList.js / ProductDetail.js

components vs pages

• 여러 페이지에서 동시에 사용되는 컴포넌트의 경우 components 폴더에서 관리
• 페이지 컴포넌트의 경우 pages 폴더에서 관리
• 해당 페이지 내에서만 사용하는 컴포넌트의 경우 해당 페이지 폴더 하위에서 관리하는 것이 좋음

2. 페이지 구성 하기

Home = 시작 화면
List = 상품 페이지
Cart = 장바구니
Detail = 상품 상세 페이지

구현하고 싶은 기능

1. 수량 증가, 감소 버튼이 있고, 장바구니 담기
2. 장바구니에 담기 상품들이 자동 계산
3. 장바구니에서 상품 삭제

문제점

• Redux 도입 -> 증가, 감소 버튼 추가되었지만 장바구니 담기와 연동 불가
  <참고>
  https://redux-toolkit.js.org/tutorials/quick-start

해결방법

Redux란?

상태 관리 라이브러리 중 하나로 Redux외에 Context API, MobX 등이 있습니다. Redux는 React뿐만 아니라 Angular, Vue에서도 사용할 수 있습니다.

<참고>
https://hanamon.kr/%ec%83%81%ed%83%9c%ea%b4%80%eb%a6%ac%eb%8f%84%ea%b5%ac-%ed%95%84%ec%9a%94%ec%84%b1/

https://hanamon.kr/redux%EB%9E%80-%EB%A6%AC%EB%8D%95%EC%8A%A4-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC/