[React] 쇼핑몰 프로젝트 (6) - Redux로 장바구니 만들기

 

산을 오르는 이유가 무엇입니까?

 

산이 거기 있기에...

 

 

Redux를 배운 이유가 무엇입니까?

 

그게 거기 있기에..

 

 

 

 

 

축구선수 쇼핑몰인만큼

장바구니는 당연히 있어야겠지...

 

리액트의 꽃이라고

할 수 있는

redux 지금 시작~~합니다

 

사실 배웠다고 제대로 사용할 수 있다고

말할 수 없지만

코딩애플 센세께선 항상

배운걸 어디에 적용할지 고민하라그랬다.

 

어떻게 사용하는지를 배우는거지

왜 사용하는지는 직접 생각해야한다.

 

그동안 state를 사용할 때

자식 컴포넌트에서 물려와서

props를 이용했었다.

 

하지만 리덕스를 설치한 후 여러가지 세팅을 해주면

props를 일일이 가져올 필요가 없어진다.

 

그래서 프로젝트 크기가 어느정도 되면

redux를 사용하는게 훨씬 편하다고한다.

 

하지만 나는 아직 중간급 규모의 프로젝트도 못해봤기에

나중에 대규모 프로젝트 하게될 때를 대비해서

미리 배워놓고 능숙하게 사용할 수 있도록 연습해야한다.

 

 

npm install @reduxjs/toolkit react-redux

 

 

 

우선 redux를 설치해주자

 

 

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
}) 

 

 

store.js 파일을 생성해주고

위 코드를 복사 붙여넣기 하자

 

store.js는 redux를 사용하여 state들을 전부 보관하고

그 state들을 export해서 다른파일에서 사용하게끔

해주는 역할이다.

 

다음은 index.js파일에서

 

App컴포넌트를

Provider컴포넌트로 감싸주고

상단에는

 

import store from './store.js'

 

 

store.js를 import해준다.

 

 

이렇게 되면

App 컴포넌트에있는 모든 하위컴포넌트들은

store.js에 있는 모든 state들을 사용할 수 있게 된다.

 

 

import { configureStore, createSlice } from '@reduxjs/toolkit'

 

 

store.js 상단에 다음과같은 코드를 넣어보자

 

이제 환경세팅은 마무리됐고

다음 글부터는 실제로 어떻게 redux를 사용할지 알아보자

 

한 포스팅에 다 담으려고 했는데

생각보다 길어질 거 같아

여기서 끊겠다