[React] Redux : store의 state (slice) 변경하는 법

리덕스에서 state 변경하는 방법을 알아보자.

지금까지 useState처럼 변경하는게 아닌 다른 방법을 사용해야하는데,

일단 store.js에서 user라는 slice를 변경한다고 가정하자

그럼 먼저 slice를 수정하는 함수를 reducers 속성에 작성하고

slice를 수정하고 싶은 컴포넌트에서 이 함수를 실행해달라고 store.js에 요청하면 된다.

 

3step으로 정리하자면

 

step 1

- slice 수정해주는 함수 만들기

함수 작성

changeName의 매개변수인 state는 기존 state를 뜻하고 (여기선 'Da Hee')

자유로이 작명 가능하지만 관습적으로 state라고 작성하여 사용한다.

이 state를 사용하고 싶으면

return 'lemmy ' + state 하여 사용 할 수 있음

state 매개변수 사용

이제 changeName() 함수를 사용할 때마다 slice가 변경될 것임

그리고 수정함수는 여러개 작성 가능함

여러개 작성 가능

 

 

step 2.

- 만든 함수를 export 한다.

export

 

수정함수들을 export 할때 reducers 안에서 export 할 수 없으니

createSlice() 함수 바깥으로 빼서 export 해야한다.

수정 함수들을 한번에 밖으로 빼고싶다면

slice명.actions 해주면 됨(object 자료형으로)

이제 이것을 export 해주면 되고

관습적으로 중괄호 안에 함수명을 작성해서 사용함 ( export let { changeName, 또다른수정함수, ... } = user.actions )

 

actions를 문법적으로 설명하자면 destructuring 문법임 (object 자료를 변수로 쉽게 빼기위한 문법이라고 생각하면 됨)

 

 

step 3.

- 만든 함수를 import 해서 사용

 

이름을 바꾸고 싶을 때 이 함수를 호출해주면 된다.

Cart.js에서 버튼을 하나 만들고 이 버튼을 누르면 sate가 변경되도록 하자.

먼저 import 해야할 것은 step2에서 export 했던 수정함수와

useDispatch() 함수이다.

import, dispatch 변수 선언

 

useDispatch() 함수는 store.js에 요청을 보내주는 함수라고 생각하면 됨.

사용법은 사용할 곳에서 dispatch() 작성하고 안에 slice변경함수() 작성해서 사용한다.

dispatch()

dispatch()함수에서 changeName()을 실행하는게 아니라 store.js에 changeName()을 실행해달라는 요청만 하는것이다.

이 방식의 반대되는 상황을 가정해보면 이 방식이 왜 좋은지 알 수 있을 것임

 

예를들어 컴포넌트가 20개정도 된다고 가정해보고 이 컴포넌트들에서 user state를 사용하고 있다고 가정하자.

모든 컴포넌트들에서 user state를 변경해버리면 갑자기 예상하지 못한 버그가 생겼을 때

(예를 들어 user state의 값이 123으로 바뀌어버림)

어디서 버그가 생겼는지 모든 컴포넌트를 전부 다 확인해봐야한다.

 

그런데 state 수정 함수를 따로 작성해서 빼놓고 컴포넌트들을 이 수정함수를 호출하는 식으로 코드를 작성하면

버그 추적하는데 훨씬 유리할 것이다.

(예를들어 값이 123으로 바뀌었다면 컴포넌트들에서 문제가 있는게 아닌 store.js 파일만 확인하면 됨)

 

이런식으로 Redux store의 state를 변경하는 이유는

Redux 개발한 사람이 이렇게 하라고 만들었고

프로젝트 사이즈가 커지면 실제로 옳은(좋은) 방식이기 때문이다.