[코딩애플] React 리액트 기초부터 쇼핑몰 프로젝트까지! (5/6)

1. 장바구니 페이지 만들기 & Redux 1 : Redux Toolkit 설치

 

먼저 Redux를 사용하기 위해 장바구니 페이지를 만들어 보겠습니다.

 

 

여기서 tr은 가로줄 th, td 넣으면 열 하나 생깁니다. 

Cart라는 js를 따로 만들어줘서 테이블을 작성해 준다음(Bootstrap 테이블) App.js에서 가져다 쓰겠습니다.

 

여기서 만약 장바구니 state 같은 것들을 여러 군데에서 쓰고 싶을때 Redux를 사용하여 관리하면 편하다.(props 전송이 필요 x)

리액트 구인시 대부분 Redux 요구

 

만약 Redux를 사용할꺼면 package.json에서 react 18버전, react-dom이 18버전 이상이어야 잘 작동됩니다.

 

여기까지 완료 됐으면 Redux 라이브러리를 설치해 봅시다.

npm install @reduxjs/toolkit react-redux 설치가 완료된다면

 

셋팅 1. store.js 파일 생성

그리고 store.js에 가서 이렇게 state를 담을 공간을 만들어주고 index.js에 가서 <Provider store={store}> 쓰기

 

 

2. Redux 2 : store에 state 보관하고 쓰는 법

 

Redux 쓰는 이유

컴포넌트간 state 공유가 편해지기 때문에 씁니다. ( props를 안해도 됌)

이렇게 createSlice안에다가 useState처럼 보관할 정보들을 만들어주고 configureStore에서 가져다 쓰면 됩니다.

이렇게 한다면 모든 컴포넌트들이 이 user를 갖다가 쓸 수 있게 됩니다.

 

이런식으로 kim이 출력됩니다.

 

여기다가 재고라는 state를 하나더 만들어 봅시다.

이런식으로 user : kim , stock : arrat(3) 형태로 출력이 되게 됩니다.

 

이렇게 한다면 비효율적이므로

이렇게 user만 가져다 쓴다던가  stock만 가져다 쓴다던가 하는것이 좋습니다.

*참고 return, 중괄호 생략 가능

 

Redux store안에 모든걸 넣지 말고 컴포넌트간 공유가 필요없으면 그냥 useState() 만 쓰셔도 됩니다!!

 

그렇다면 예시로 사용자가 장바구니에 아이템을 넣었다고 가정해보고 그것을 store에 보관하고, 장바구니 페이지에서 데이터 바인딩을 해보겠습니다.

이런식으로 말이죠.

 

그럼 store.js에 가서

이런식으로 cart를 만들어주고 Cart.js에가서 맵반복문을 통해서 출력해주면 됩니다.!

이렇게 state로 이름을 변경하고

이런식으로 밑에서 가져다 쓰면 됩니다.

 

3. Redux 3 : store에 state 변경하는 법

 

그리고 만약 Redux에 저장되어 있는 state를 변경하고 싶다면 state를 수정해주는 함수를 만들고, 원할 때 그 함수 실행해달라고 store.js에 요청해야 합니다.

 

Redux state 변경 순서

1. state 수정해주는 함수 만들기

여기서 state가 가르키는것은 kim을 가르킵니다. 함수를 더 만들고 싶으면 밑에다가 changeName 처럼 하나 더 만들어 주면 됩니다!

 

2. 만든 함수를 exprot 해야 합니다.

이런식으로 쓰고 싶은 함수들을  exprot 해줍니다.

이렇게 { } 는 변수로 빼는 문법일 뿐입니다.

 

3. 만든 함수를 import 해서 사용해보겠습니다.

 

Cart.js에 +버튼을 만들어서 누르면 state를 john kim으로 변경하겠습니다.

먼저 dispatch 를 만들어주고( store.js로 요청을 보내주는 함수)

밑에다가 dispatch(state변경함수()) 이렇게 사용하시면 됩니다. 물론 changeName() 함수도 위에서 import해주셔야 합니다. 여기서 dispatch는 그 자리에서 함수를 실행하는 것이 아닌   store.js로 메세지를 보내는 변경함수입니다. 

 

이것을 확인하시고 싶으시다면 위에다가

이렇게 작성해주시고 버튼을 누르셔서 확인해보시면 되겠습니다.!

 

 

위처럼 dispatch를 실행했을때 변경이 아니라 요청을 하는 이유는 만약 변경을 해버리면 컴포넌트가 많아질 경우 어디서 변경이 일어났는지 모르기 때문입니다.

 

4. Redux 4 : state가 object/array일 경우 변경하는 법

 

예를들어서 

여기에 kim이라는 이름은 { user : "kim" } 객체형인데 이게

이렇게 값이 하나가 더 추가가 된 객체형을 출력하려면

이런식으로 하시면 출력이 됩니다. 이것을 버튼을 눌렀을때 { name : "part"} 로 바꾸려면

이렇게 변경하시면 되고 이것보다 더 쉬운 방법이

array/object의 경우 직접수정해도 state는 변경이됩니다.(immer.js 라는 라이브러리 때문)

 

만약 버튼을 눌렀을때 age가 +1되는 기능을 만드려면

이렇게 +1되는 기능을 만들어주고

Cart.js

이런식으로 가져다 쓰시면 되겠습니다.

 

결론 return문 없이도 작성이 가능합니다.  

 

그리고 만약 increase를 1뿐만이 아닌 10 , 100 등등 엄청나게 많은 숫자들을 하고 싶을때 함수를 계속해서 만들 수 없으므로 state변경함수에 파라미터를 뚫어 보겠습니다.

 

이런식으로 a라는 파라미터를 통해 a.payload( 화물,소포,택배 라고 생각하시면 편합니다.) 보통은 a보다는 action이라고 사용합니다. (state 변경함수를 action이라고 합니다.)

이렇게 하시면 100씩 증가하게 됩니다. 

 

또한 코드가 길면 파일을 하나 만들어서 분리하시면 됩니다. 예를들어 user라는 변수가 너무 길기 때문에 이렇게 폴더를 만들어 분리를 시켜주고 

store.js에서 가져다 쓰시면 됩니다.

이렇게 createSlice를 옮겨주고 export도 옮겨주고

이런식으로

import 경로도 바꿔주시면 됩니다.!

 

 

5. Redux 5 : 장바구니 기능 만들기

 

1. 수량 + 기능 만들기

장바구니에서 + 버튼을 누르면 수량이 1 증가하게 끔 만들어 보기

state 수정은

1. 수정함수 만들고

2. export하고

3. import 해서 사용하면 됩니다.

 

먼저

이런식으로 addCount 함수를 만들어 주고 export를 해주면 됩니다.

 

이것을 쓰려면

이런식으로 가져다 쓰시면 됩니다.

 

근데 만약 정렬버튼을 눌렀을때 그 상품의 id와 같은 id를 가진 상품을 찾아서 +1 을 해줘야 합니다.

그래서 이렇게 해당하는 index가 아닌 해당하는 상품의 id에다가 +를 해줘야 합니다.

이렇게 findIndex함수를 쓸 수 있고 여기서 a는 array 안에들어있던 하나 하나의 데이터를 의미하고 

이런식으로 let 번호라는 변수명 안에 담아주고 더해주면 조금더 확실하게 더해줄 수 있게 됩니다.

 

 

그리고 이번엔 버튼을 누르면 state에 상품을 추가시켜 보겠습니다.

이게 싫으면 payload를 이용하시면 됩니다.

이렇게 addItem() 함수를 만들어주고 export 해주고

 

Detail.js에서 addItem, dispatch를 추가해주고

이런식으로 하드코딩으로 추가해주면 되고, 상세페이지마다 다른상품을 추가해 주려면 현재 페이지에 있는 상품 제목을 넣어주면 됩니다. id도 마찬가지이고!

 

*Redux Toolkit은 Redux의 개선버전입니다!

 

 

 

++ 추가적으로 응용 하시려면 

1. 장바구니 항목 삭제기능만들기

2. 중복상품은 추가가 되지 않게끔  만들어보시면 되겠습니다.!