[React] Redux Toolkit 설치하기

 

 

💡 cart.js 페이지 만들고 테이블 양식 boot-strap에서 가져오기

---

cart.js 파일을 만들고 App에 Route 경로를 만들어준다.

 

 

BootStrap 을 이용해서 Table을 만들어 보자

최 외곽에 Table 태그를 넣고

 

<tr> 은 하나의 가로줄을 만드는 역할을 하고(행)

<th> <td> 하나의 세로줄을 만드는 역할을 한다(열)

 

<thead> 는 th를 포함한 제목 부분

<tbody> 는 td를 포함함 제목부분

 

이때 장바구니 State 가 App, Detail, Cart 등에 필요하면??

 

🔍 최상단 컴포넌트에 만들어서 App에 만들어서 부모에서 자식으로 전송해야한다.

 

이러한 과정이 매번 번거롭고 귀찮다면??!!

 

Redux 를 쓰면 된다!

Redux를 쓰면 컴포넌트 간에 props 없이도 state 공유가 가능하다.

컴포넌트가 많은 프로젝트 일 수록 Redux의 장점은 극대화 된다.

 

💡 Redux Toolkit 설치하기

---

Redux Tookit은 react, react-dom 버전이 18.1 버전 이상이어야 잘 동작함.

react 터미널에 다음을 입력

npm install @reduxjs/toolkit react-redux

			or
            
yarn add @reduxjs/toolkit react-redux

 

Redux를 쓰기 위한 세팅.

 

1.store.js 를 src 폴더에 만들기

state 를 보관하는 통 store.js

store.js 파일을 만들고 그 안에 아래의 코드를 넣어주어야 한다.(기본 세팅)

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
})

 

2. index.js 파일가서 Provider 라는 컴포넌트와 아까 작성한 store.js 파일을 import 해준다.

import 한 Provider 와 store을 <Provider store={import 해온 store}> 을 만들어 <App/>을 감싸준다.

 

그러면! <App>과 App 하위의 모든 자식 컴포넌트들은 store.js에 있던 state를 언제든 이용이 가능함.

 

 

 

 

 

 

출처 : 코딩애플 React 강의입니다.

스스로 생각해서 코드를 직접 짜보게끔 많이 유도해주시고 강의 설명도 이해가 쉽게 설명해주십니다.

https://codingapple.com/