리덕스는 얕은 복사? 깊은 복사?

리덕스를 사용하면서 가장 중요한 부분은 불변성을 지켜야한다는 것이라고 생각한다.

우선 불변성이란, 기존의 데이터를 수정하는 것이 아니라, 기존의 데이터는 그대로 놔두고 새로운 데이터를 기존의 데이터에 대입하는 것이다.

const reducer = (state = initialState, action) => {
    switch(action.type) {
        case ADD:
            return {...state,
                    list:[...state.list, {id:action.payload.id, text:action.payload.text}]};

        case LOAD:
            return {...state, load: !state.load};

        default:
            return state;
    }
}

위의 코드는 리덕스의 리듀서 함수인데, 기존의 state를 변경하지 않기 위해 spread 연산자로 state를 복사하여 기존의 state를 완전히 갈아끼운다.

리덕스가 값을 비교하는 방법

우선 리덕스는 주소값을 비교하여 값을 비교한다.

리덕스가 변경을 알아차리기 위해 새로운 데이터의 속성값을 하나하나 비교한다면 성능과 복잡성의 문제를 일으킬 수 있다.

그래서 주소값을 비교하는 것인데, spread 연산자를 사용하면 객체의 depth가 1이라면 깊은 복사를 수행할 수 있고, depth가 1 이상이면 얕은 복사를 수행할 수 있다.

얕은 복사를 수행하면 주소값을 그대로 복사하기 때문에 리덕스에서 값의 변경을 알아차릴 수 없다. 깊은 복사를 사용해야 주소값이 다른 새로운 객체를 생성할 수 있다.