[Redux] 불변성이란 무엇인가? 복사본을 만들어 저장하자.

JavaScript에서 객체와 배열은 모두 변경 가능하다.

객체를 생성하면 해당 필드의 내용을 아래와 같이 변경 가능하다.

메모리 안에서 객체나 배열의 참조값은 같지만 객체/배열 내부 값이 바뀌었다. (불변성을 지키지 못함)

const obj = { a: 1, b: 2 }
// still the same object outside, but the contents have changed
obj.b = 3

const arr = ['a', 'b']
// In the same way, we can change the contents of this array
arr.push('c')
arr[1] = 'd'

 

값을 불변하게 업데이트하려면 기존의 객체/배열의 복사본을 만든 다음 복사본을 수정해야 된다.(불변성 지킴)

아래의 코드를 참고하자.

const obj = {
  a: {
    // To safely update obj.a.c, we have to copy each piece
    c: 3
  },
  b: 2
}

const obj2 = {
  // copy obj
  ...obj,
  // overwrite a
  a: {
    // copy obj.a
    ...obj.a,
    // overwrite c
    c: 42
  }
}

const arr = ['a', 'b']
// Create a new copy of arr, with "c" appended to the end
const arr2 = arr.concat('c')

// or, we can make a copy of the original array:
const arr3 = arr.slice()
// and mutate the copy:
arr3.push('c')

Redux는 모든 상태 업데이트가 불변으로 수행될 것으로 기대한다.