[React] 장바구니 페이지, Redux Toolkit 설치

사용자가 장바구니에 추가한 아이템을 표 형식으로 보여주도록 해보자.

새로운 페이지가 필요할 것이니

Route 부분에서 새로 코드를 작성해준다.

 

그런데 element에 직접 JSX를 작성하기엔 너무 지저분하니 따로 빼로 집어넣어 사용하겠음 (컴포넌트로)

 

새로운 컴포넌트를 src 파일 안에 만들겠음.

src/routes/Cart.js

 

보통 컴포넌트 파일들은 대문자로 시작하는게 국룰임.

이제 Cart 컴포넌트 만들자.

 

<></> 안에 내용 채워주면 될 것임

 

장바구니 페이지는 표 형식으로 상품을 쭉 보여줄 것이다.

그러니 표를 만들 것임.

<table> 태그를 이용하면 되는데 이러면 디자인을 직접 다 해주어야 하니깐

react-bootstrap을 사용하자.

 

당연히 import부터 해야할 것이다.

그리고 <Table> 이용해서 UI 만들겠음.

 

이제 App.js에서 사용해보자.

import

JSX에서 사용

렌더링 UI

 

이제 내용을 데이터 바인딩해서 렌더링 시켜보겠음

데이터를 cartItem state에 보관해두고 데이터 바인딩 해보겠음.

일단 cartItem 스테이트가 Cart 컴포넌트에서 필요하니 Cart 컴포넌트에 만들어주면 될 텐데

만약 Detail, App 컴포넌트에서도 필요하다면 어디에 만들면 좋을까?

최상위 컴포넌트인 App 컴포넌트에 만들어주는게 좋을 것이다.

 

그런데 귀찮은점으론 props 전송이나 Context API를 사용해야 하기 때문에 귀찮다.

이럴때 사용할 수 있는것이 Redux라는 라이브러리이다.

 

Redux를 사용하면 컴포넌트간의 props 전송 없이 state 공유가 가능하다.

 

이것이 왜 가능한지 간단하게 설명해보자면

Redux를 설치하면 자바스크립트 파일을 하나 만들어서 그곳에 state를 모두 모아서 보관해 둘 수 있다.

그리고 모든 컴포넌트들이 거기에 있는 state를 가져다가 쓸 수 있게 해주는 라이브러리임.

 

리덕스를 설치하면 props 전송이 필요없는것임.

모든 컴포넌트들이 state를 가져다 쓰면 되니까.

(리액트 사용자 구인 시 Redux 요구하는 경우가 대부분이니 잘 알아두자.)

 

일단 Redux 라이브러리를 설치하기전에 확인해야할 사항이 있는데

pakage.json 파일에 보면 react, react-dom 이라는 부분의 버전이 18 이상이여야 제대로 설치가 될 것이다.

 

버전이 낮으면 아래처럼 코드를 수정해주고 파일 저장 후 터미널에서 npm install 입력하면 된다.

그리고 Redux 설치하면 됨

 

 

redux 설치 방법은 터미널에 npm install @reduxjs/toolkit@1.8.1 react-redux 입력해주면 된다.

 

만약 설치 시 에러발생하면 버전 문제일 것이다.

 

 

이제 리덕스를 쓰기 위해선 세팅이 필요한데

 

첫번째로 파일이 하나 필요하다. store.js 라고 파일을 만들 것임.

(state를 보관할 파일, store라고 칭함)

src 하위에 만들고 내용을 작성함.

 

 

두번째로는 index.js에서 이 store를 사용하겠습니다 하고 선언해주면 된다.

import와 <provider>

 

먼저 Provider를 import 해주고 store.js 파일도 import 해준다

그리고 store 속성을 주어서 import한 store를 집어넣어주면 됨

 

그러면 어떤일이 일어나냐면 App이라는 컴포넌트와 그 자식 컴포넌트들은 모두 store에 있는 state를 갖다 쓸 수 있음.