이 시간에는 버튼을 누르면 'kim' 이라 저장되어있는 값을 'john kim' 으로 수정하려한다.
1. store.js에 state변경해주는 함수부터 만들기
2. 만든함수 export
3. 필요 컴포넌트에서 함수 import , 이때 dispatch() 로 감싸서 사용✔ 1. store.js에 state변경해주는 함수부터 만들기
해당 slice 안에 redecers : { } 내에 함수를 만든다.
이때 함수 작명은 내 맘대로, 파라미터 하나를 작명하면 그건 기존 state가 된다.
return 우측에 새롭게 작성된 state가 기존 state를 갈아치운다.
changeName() 쓸 때 마다 'kim' -> 'john kim' 이 된다.
✔ 2. 만든함수 export 하기
순서1의 코드 밑으로 추가하여 작성한다.
slice이름. actions > state변경함수가 전부 그 자리에서 출력되기때문에 변수에 저장해둔다.
✔ 3. 필요 컴포넌트에서 함수 import , 이때 dispatch() 로 감싸서 사용
3-1 state변경이 필요로한 Cart.js에서 state변경 함수를 import 해온다.
3-2 이때 useDispatch를 라이브러리에서 가져온다.
3-3 dispatch ( state변경함수() ) 이렇게 감싸서 실행하면 state가 변경된다.
여기서 dispatch 는 Store.js로 " changeName()함수 실행해달라 " 메시지를 보내는 역할로, 실행은 store.js 에서 한다.
<Cart.js> 전체코드
아래의 버튼을 누르면 kim 의 장바구니 > johmkim의 장바구니로 변경되는것을 볼수있다.
✔ 복잡한 Redux를 사용해야하는 이유 ? 👀
컴포넌트에서 state를 직접 수정하면 편할수 있으나 프로젝트가 커지게 되면 심각한 단점이 있다.
각 컴포넌트 100개 에서 직접 'kim'이라는 state를 변경하다가 갑자기 'kim'이 123이 되어버리는 버그가 발생하면 범인을 찾기위해 100개 컴포넌트를 다 뒤져야한다;;
그런데 state 수정함수를 store.js 에 미리 만들어두고 컴포넌트는 그것을 실행해달라 부탁만 하는 식으로 코드를 짜놓으면 'kim'이 123 되어버리는 버그가 발생했을때 범인을 찾기가 수월한다. (범인은 무조건 store.js 이니까! > 물론 수정함수를 잘 만들어두었다면 )
