Skip to main content

불변 업데이트 패턴

사전에 요구되는 개념들#불변객체관리에서 소개된 글들은 객체의 필드를 업데이트하거나 배열의 끝에 항목을 추가한다던지하는, 불변객체를 관리하는 기본적인 방법들의 좋은 예를 제공합니다. 하지만 가끔 리듀서가 복잡한 작업을 수행하기 위해 여러 기본적인 것들을 조합해서 사용해야 할 수 있습니다. 여기서는 일반적으로 구현해야 하는 작업의 예를 보여줍니다.

중첩된 객체 업데이트하기​

중첩된 데이터를 업데이트하기 위한 키는 모든 중첩의 단계를 적절히 복사하고 업데이트하는 것입니다. 이것이 리덕스를 학습하는데 있어서 어려운 개념일 수 있지만, 중첩된 객체를 업데이트할 때 빈번히 일어나는 문제입니다. 이는 실수로 직접적인 변경을 일으키므로 피해야 합니다.

일반적인 실수 #1: 같은 객체를 가르키는 새로운 변수​

새 변수를 정의하는 것은 실제 객체를 만들지 않고. - 같은 객체의 다른 참조를 형성합니다. 이 오류의 예는 다음과 같습니다.

function updateNestedState(state, action) {
  let nestedState = state.nestedState
  // 에러: 존재하는 객체의 참조에 대한 직접적인 변경 - 하지마세요!
  nestedState.nestedField = action.data

  return {
    ...state,
    nestedState
  }
}

이 함수는 상태 최상위 객체를 얕은 복사 해서 제대로 반환하지만, nestedState변수가 존재하는 객체를 가르키기 때문에 상태가 직접 변경됩니다.

일반적인 실수 #2: 한 단계의 얕은 복사를 만듦​

이 오류의 일반적인 버전은 다음과 같습니다.

function updateNestedState(state, action) {
  // 문제: 이는 얕은 복사를 수행합니다!
  let newState = { ...state }

  // 에러: nestedState는 여전히 같은 객체입니다!
  newState.nestedState.nestedField = action.data

  return newState
}

최상위의 얕은 복사로는 충분하지 않습니다. - nestedState객체도 복사해야 합니다.

올바른 접근: 중첩된 모든 단계 복사​

불행하게도 깊게 중첩된 상태에 불변객체 업데이트를 적절히 적용하는 단계는 쉽게 번잡해지고 읽기 어려워집니다. 다음은 state.first.second[someId].fourth의 업데이트에 대한 예제입니다.

function updateVeryNestedField(state, action) {
    return {
        ....state,
        first : {
            ...state.first,
            second : {
                ...state.first.second,
                [action.someId] : {
                    ...state.first.second[action.someId],
                    fourth : action.someValue
                }
            }
        }
    }
}

확실히 중첩된 각 레이어는 가독성을 떨어뜨리고 실수하기 쉽습니다. 이는 상태를 가능한 평평하고 조직적으로 유지해야 하는 이유 중 하나입니다.

요소를 배열에 추가하고 지우기​

보통, 자바스크립트 배열의 내용물은 push, unshift, splice와 같은 가변함수를 사용해서 수정됩니다. 우리는 리듀서에서 상태를 직접 바꾸기를 원하지 않기 때문에, 보통 이를 피해야 합니다. 이러한 이유로 "삽입"이나 "제거"가 다음처럼 작성될 수 있습니다.

function insertItem(array, action) {
  return [
    ...array.slice(0, action.index),
    action.item,
    ...array.slice(action.index)
  ]
}

function removeItem(array, action) {
  return [...array.slice(0, action.index), ...array.slice(action.index + 1)]
}

그러나, 원래 메모리의 참조는 수정되지 않는다는 것이 중요합니다. 우리가 먼저 복사본을 만드는 한, 안전한 가변 복사를 할 수 있습니다. 배열과 객에 모두에 적용되지만 중첩된 값도 같은 규칙으로 업데이트돼야 한다는 것에 주의해야 합니다.

이는 다음과 같이 삽입과 제거함수를 작성할 수 있다는 의미입니다.

function insertItem(array, action) {
  let newArray = array.slice()
  newArray.splice(action.index, 0, action.item)
  return newArray
}

function removeItem(array, action) {
  let newArray = array.slice()
  newArray.splice(action.index, 1)
  return newArray
}

제거함수는 다음같이도 구현할 수 있습니다.

function removeItem(array, action) {
  return array.filter((item, index) => index !== action.index)
}

배열의 요소 업데이트하기​

배열에서 하나의 항목을 업데이트하는 것은 Array.map를 사용해서 우리가 업데이트하길 원하는 요소에 새로운 값을 반환하고 다른 모든 아이템에는 기존 값을 반환함으로써 수행할 수 있습니다:

function updateObjectInArray(array, action) {
  return array.map((item, index) => {
    if (index !== action.index) {
      // 이는 관심없는 요소입니다 - 그대로 유지하세요
      return item
    }

    // 그게 아니면, 우리가 원하는것입니다. - 업데이트된 값을 반환하세요
    return {
      ...item,
      ...action.item
    }
  })
}

불변 업데이트 유틸리티 라이브러리​

불변업데이트 코드를 작성하는 것은 지루할 수 있기 때문에, 과정을 추상화하기 위한 많은 유틸리티 라이브러리가 있습니다. 이 라이브러리는 API와 사용법이 다양하지만 어쨌거나 짧고 간결한 방법을 제공하려 합니다. 일부 dot-prop-immutable과 같은 곳에서는 문자열 경로를 사용합니다.

state = dotProp.set(state, `todos.${index}.complete`, true)

그 외에 immutability-helper(현재 사용되지 않는 리액트 불변 헬퍼 에드온의 포크) 같은 것은 중첩된 값과 헬퍼 함수를 사용합니다.

var collection = [1, 2, { a: [12, 17, 15] }]
var newCollection = update(collection, {
  2: { a: { $splice: [[1, 1, 13, 14]] } }
})

이들은 수동으로 불변 업데이트 로직을 작성하는 것에 대한 유용한 대안을 제공합니다.

많은 불변 업데이트 유틸리티들은 Immutable Data#Immutable Update Utilities의 Redux Addons Catalog섹션에서 찾을 수 있습니다.