[부스터코스/웹 프론트엔드 시작하기 (리액트&리덕스)] 리덕스 시작하기 - 새로운 state 값 만들기

이번에는 state 값을 변경시키는 방법에 대해 알아본다.

color_change_redux.html

우선 다른 요소를 직접 제어하는 코드를 삭제한다.

그리고 아래 코드로 수정한다.

color_change_redux.html

dispatch() 함수는 type 속성을 꼭 넣어주어야 한다.

이 함수는 reducer() 함수를 호출하도록 약속되어 있다. 이 때 이전의 state 값과 현재의 action 값을 인자로 전달한다.

 

이렇게 전달된 state와 action은 reducer 함수 내에 console.log()로 확인할 수 있다.

color_change_redux.html

콘솔

처음 reducer가 호출됐을 때는 state가 undefined이면서 type과 color가 출력된다.

후에 dispatch를 통해 호출됐을 때는 이전 state인 {color: 'yellow'}가 출력되고 이후에 action이 출력되는 것을 볼 수 있다.

 

그렇다면 이제 아래와 같은 코드로 state 값을 변경할 수 있을 것이다.

color_change_redux.html

reducer가 전달받은 action의 type에 따라 state의 특정 속성값을 변경시키고 state를 반환한다.

하지만 이 코드는 원본 state를 그대로 수정하는 만큼 나중에 코드 수정이나 유지보수가 어렵게 되고, 리덕스의 장점이라고 설명했던 undo와 redo의 기능을 제대로 사용할 수 없게 된다.

 

따라서 state 객체를 복사해서 새로운 객체를 만든 다음 그 객체를 수정해서 사용하는 것이 좋다.

color_change_redux.html

수정한 코드처럼 Object.assign() 메소드를 사용해서 state 객체를 복사하고, {color: "red"} 라는 새로운 속성값을 추가해서 새로 만들어진 newState를 반환하도록 한다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Object.assign() - JavaScript | MDN

---

부스트코스의 강의 내용을 정리한 포스트입니다.

https://www.boostcourse.org/web231/lecture/1387451

웹 프론트엔드 시작하기 (리액트&리덕스)