Redux stydy_v.1.1 (TIL 61일차)

"Object.assign()"

불변성 (immutability)

리덕스를 이야기하는데 Object.assign(), 그리고 불변성이 무슨 관계일까요? 오늘은 짧고 굵게 이 두 가지를 통해서 리덕스가 가진 특징을 살펴볼 예정입니다.

자바스크립트에서 불변성이란 아주 간단히 말해서 원본 객체가 손상받지 않는 것입니다. 자바스크립트가 제공하는 메소드들은 크게 immutable 한 것과 mutable 한 것으로 나뉘죠. mutable 한 메소드는 인자, 또는 대상으로 받은 객체 자체를 변경하게 됩니다. 반대로 immutable 한 메소드는 새로운 객체를 반환함으로써 원본 객체를 손상시키지 않는 방식으로 작동하죠.

불변성 자체를 변수와 연결해 이해하는 것은 본질적으로는 무리가 있다고도 생각하지만, 그래도 불변성이라고 하는 개념이 어렵다면 아래의 예시로 힌트를 얻어보도록 합시다.

const a = 1;
let b = 1;

a = 2;  // Uncaught TypeError: Assignment to constant variable.
b = 2;  // console.log(b) --> 2;

let 으로 선언한 변수는 다시 다른 것을 재할당할 수 있지만, const 는 상수처럼 작동하기 때문에 다른 것을 재할당할 수 없죠. 이 때, 개념적으로 let 은 mutable 하다고 할 수 있고 const 는 immutable 하다고 할 수 있습니다. 원본이 변경되지 않아야 하는 것이 불변성의 핵심 개념이라고 할 수 있는 것이죠.

Reducer

리덕스를 사용하면서 state 를 업데이트 하기 위해서는 자바스크립트의 순수 함수 (pure function) 을 사용하게 됩니다. 그리고 이것을 reducer 라고 부르죠. 이 때 reducer 는 불변성을 가져야 합니다. 다시 말하면 reducer 를 구성하는 자바스크립트 함수를 작성할 때, 그 내부에서 동작하는 메소드를 포함한 모든 것들은 immutable 한 방식이어야 합니다.

이제 막 리덕스 공부를 시작했기 때문에 다른 방법이 있는지 여부를 아직 잘 알지 못합니다만, 제가 배운 reducer 를 작성하는 방법은 바로 Object.assign() 메소드를 활용하는 방식입니다.

"어? Object.assign() 은 mutable 한 방식으로 작동하지 않나요?" 라고 생각할 수도 있습니다. 실제로 Object.assign() 공식문서를 살펴보면 동작 예시에서 target 객체가 바뀐 것을 알 수 있습니다.

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);  // expected output: Object { a: 1, b: 4, c: 5 }
console.log(returnedTarget);  // expected output: Object { a: 1, b: 4, c: 5 }

target 객체는 위에서 보시는 것처럼 변했습니다. returnedTarget 도 마찬가지이구요. 그렇다면 source 는 어떨까요?

console.log(source);  // expected output: Object { b: 4, c: 5 };

source 는 바뀌지 않은 것을 확인할 수 있습니다. target 객체만 바뀌는 것이죠. 따라서 우리는 reducer 함수 내에서 Object.assign() 메소드를 활용할 때, 다음과 같은 방식으로 사용하여 불변성을 유지할 수 있습니다.

...
return Object.assign({}, 기존 state, {
  변경하려는 state 내부의 키: [...기존 state 안에 담겨있던 값, action.payload 를 통해 전달받은 값]
})
...

state 의 구성을 다루지 않아 위의 예시가 조금 이해가 어려울 수 있겠습니다. 이 부분은 다음에 이어서 다뤄보도록 하겠습니다.