[React] Redux : store에 state 보관하고 사용하는 방법

리덕스 store에서 state를 사용하는 법을 알아보겠음.

 

먼저 redux는 왜 사용하냐?

컴포넌트간에 state공유가 귀찮을 때 사용함

(props 전송이 아예 필요가 없음)

 

store 안에 state 만드는 법을 알아보겠음.

 

먼저 stroe.js 파일에다가 createSlice() 함수를 사용한다.

(useState 비슷한 역할임)

여기에 name이라는 속성을 주고 state 이름을 작명 후

initialState라는 속성에 값을 주면 된다.

(state 하나를 slice라고 부름)

createSlice() 함수로 state 만든다.

 

이렇게 만들었다고 사용 가능한게 아니라 configureStore에 등록해줘야함.

이렇게 등록해야함

 

reducer: { }안에 등록할 때엔 작명: createSlice()의 name.reducer 해주어야 한다.

 

이제 만들었으니 Cart 컴포넌트에서 사용해보도록 하겠다.

Cart.js에서 useColector 훅을 사용할 것인데 이 훅은 Redux store을 가져와 주는 훅이라 생각하면 된다.

당연히 import 해주어야 사용 가능하다.

 

 

이제 변수명(a)을 활용해서 출력을 하던지 데이터 바인딩을 하면 될 것이다.

 

진짜로 등록했던 state들이 다 나오는지 콘솔로그로 출력해보겠음.

로그 잘 출력됨

 

콘솔로그로 잘 출력되는것을 보니 App 컴포넌트의 하위 컴포넌트들에서도 잘 사용이 된다는 것을 알 수 있다.

(a.user 이런식으로 필요한 정보만 꺼내쓸 수 있음)

 

또 다른 state를 하나 만들어 보겠음.

저번에 사용했던 stock(재고) state를 만들어 보겠다.

stock state 만들기

 

이것도 등록해주면 사용할 수 있을 것이다.

등록 끝

 

이제 컴포넌트들에서 stock 스테이트 사용 가능함.

a.stock 또는 a.user 해서 사용하면 됨 (변수명을 a가 아닌 state로 하면 조금더 직관적일 것이다.)

 

참고사항 몇개 더 알아보면 먼저 아래의 useSelector함수를 보자

 

useSelector() 사용 시 소괄호에 함수를 집어넣었는데 함수를 넣은 이유는

redux 만든 사람이 그렇게 만들어서 그런것 뿐임

 

그런데 중요한 것은 state라고 작명한 부분은 store 안에 있는 모든 state를 의미하기 때문에

어떤 state만 사용할지는 아래와 같이 작성하면 된다.

stock 이라는 항목만 가져다 쓸 수 있음.

 

그리고 js 문법에서 위의 코드를 축약하는 방법이 있는데

중괄호와 return은 동시에 생략이 가능하므로 아래와 같이 작성하는게 더 깔끔할 것이다.

축약

이제 데이터 바인딩해서 사용해보자

중괄호 문법으로 state를 집어넣자

바인딩 잘 된다.

 

 

Redux를 쓰면 편리한데 왜 props를 쓸까?

 

리덕스는 외부 라이브러리를 설치가 필요하고 세팅하는 문법도 필요하고 state를 만들엇으면 등록도 해야하므로

코드가 더 길어진다.

그러므고 간단한 프로젝트같은 경우는 props 전송하는게 더 간단하고 편리한데

컴포넌트가 20개 30개 크게 늘어난다면 Redux를 사용하는게 나을 것이다.

 

근데 redux 쓴다고 해서 모든 state를 store에 보관할 필요는 없다.

(여러 컴포넌트에서 쓰이지 않고 한 컴포넌트에서만 쓰이면 굳이 store에 보관할 필요 없다.)

그냥 useState 쓰는게 더 간단함