[React] Redux 2

Redux의 state를 변경하고 싶으면 변경하는 법이 따로 있습니다.

1. store.js에 state변경해주는 함수부터 만들고
2. export 해두고
3. 필요할 때 import 해서 쓰면 되는데 dispatch() 로 감싸서 써야합니다.

좀 길고 복잡합니다. 

 

 

 

 

 

store의 state 변경하는 법 

큰 그림은 다음과 같습니다.

state 수정해주는 함수부터 store.js에 만들어두고

그걸 컴포넌트에서 원할 때 실행하는 식으로 코드를 짭니다. 

버튼누르면 예전에 'kim' 이라고 저장해놓은걸 'john kim' 으로 수정하고 싶으면 어떻게 해야할지 알아봅시다. 

 

 

 

1. store.js 안에 state 수정해주는 함수부터 만듭니다.

 

slice 안에 reducers : { } 열고 거기 안에 함수 만들면 됩니다.

- 함수 작명 맘대로 합니다.

- 파라미터 하나 작명하면 그건 기존 state가 됩니다.

- return 우측에 새로운 state 입력하면 그걸로 기존 state를 갈아치워줍니다. 

 

이제 changeName() 쓸 때 마다 'kim' -> 'john kim' 이렇게 변합니다.

 

 

 

 

 

2. 다른 곳에서 쓰기좋게 export 해둡니다.

 

이런 코드 store.js 밑에 추가하면 됩니다.

slice이름.actions 라고 적으면 state 변경함수가 전부 그 자리에 출력됩니다.

그걸 변수에 저장했다가 export 하라는 뜻일 뿐입니다.

 

 

 

 

 

 

3. 원할 때 import 해서 사용합니다. 근데 dispatch() 로 감싸서 써야함 

 

예를 들어서 버튼같은거 하나 만들고 그 버튼 누르면 state를 'kim' -> 'john kim' 이렇게 변경하고 싶으면

 

 

이렇게 코드짜면 됩니다.

- store.js에서 원하는 state변경함수 가져오면 되고 

- useDispatch 라는 것도 라이브러리에서 가져옵니다.

- 그리고 dispatch( state변경함수() ) 이렇게 감싸서 실행하면 state가 변경됩니다. 

 

dispatch로 꼭 감싸야 실행됩니다.

 

 

 

 

 

그지같고 복잡한데요

store안에 있는 state를 수정하고 싶으면

- state 수정해주는 함수를 store.js에 만들어두고 

- 컴포넌트는 그걸 부르기만 하는 식으로 state 수정하게 되어있습니다. 

 

 

 

Q. 왜 이렇게 복잡하고 그지같나요?

Redux 만든 사람이 정한 문법일 뿐이라 Redux 만든사람에게 뭐라하면 됩니다. 

 

 

Q. 컴포넌트에서 state 직접 수정하면 편하지 않나요?

그럼 당장은 편한데 나중에 프로젝트가 커지면 심각한 단점이 있을 수 있습니다. 

 

 

컴포넌트 100개에서 직접 'kim' 이라는 state 변경하다가 갑자기 'kim'이 123이 되어버리는 버그가 발생하면 

범인 찾으려고 컴포넌트 100개를 다 뒤져야합니다. 

 

근데 state 수정함수를 store.js에 미리 만들어두고 컴포넌트는 그거 실행해달라고 부탁만 하는 식으로 코드를 짜놓으면

'kim'이 123이 되어버리는 버그가 발생했을 때 범인찾기가 수월합니다.

범인은 무조건 store.js에 있으니까요. (수정함수를 잘 만들어놨다면)

 

 

 

 

 

 

redux state가 array/object인 경우 변경하려면 

대충 {name : 'kim', age : 20} 이렇게 생긴 자료를 state로 만들어봅시다.

근데 저기서 'kim' -> 'park' 이렇게 변경하고 싶으면 state 변경함수 어떻게 만들어야할까요? 

 

 

당연히 저렇게 쓰면 changeName() 사용시 변경됩니다.

return 오른쪽에 적은걸로 기존 state를 갈아치워주니까요. 

 

 

 

근데 state를 직접 수정하라고해도 변경 잘 됩니다.

state를 직접 수정하는 문법을 사용해도 잘 변경되는 이유는

Immer.js 라이브러리가 state 사본을 하나 더 생성해준 덕분인데 Redux 설치하면 딸려와서 그렇습니다.

 

 

그래서 결론은 array/object 자료의 경우 state변경은 state를 직접 수정해버려도 잘 되니까 직접 수정하세요

 

(참고) 그래서 state 만들 때 문자나 숫자하나만 필요해도 redux에선 일부러 object 아니면 array에 담는 경우도 있습니다. 

수정이 편리해지니까요. 

 

 

 

 

 

state 변경함수가 여러개 필요하면

 

 예를 들면 age를 1씩 증가시키도록 state를 변경하는 함수를 만들었다고 합시다.

 

가끔은 +10 하고 가끔은 +100 하고싶으면 어떻게 하죠?

+10 하는 함수만들고 

+100 하는 함수만들고

그렇게 여러개를 미리 만들어놔도 되는데 

근데 함수는 파라미터문법 이용하면 비슷한 함수 여러개 만들 필요가 없다고 했습니다. 

state변경함수에도 파라미터문법 사용가능합니다.

 

 

 

 

 

state변경함수의 둘째 파라미터를 작명하면 이제

increase(10)

increase(100)

이런 식으로 파라미터입력을 해서 함수사용이 가능합니다.

파라미터자리에 넣은 자료들은 a.payload 하면 나옵니다.

 

그래서 위처럼 코드 작성해놓으면

increase(10) 이거 실행하면 +10 됩니다.

increase(100) 이거 실행하면 +100 됩니다. 

여기서도 파라미터문법 이용하면 비슷한 함수들은 여러개 만들 필요없습니다. 

 

 

(참고)

- a 말고 action 이런 식으로 작명 많이 합니다. 

- action.type 하면 state변경함수 이름이 나오고

- action.payload 하면 파라미터가 나옵니다. 

 

 

 

 

<출처 : 코딩애플 : React 리액트 기초부터 쇼핑몰 프로젝트까지!>