[React] Immersion

react logo

 

Immersion(불변성)

세상에 불변하는 것이 있을까요? 아마도 없을 겁니다. 아주 긴 시간 속에서는 조금이라도 변하기 마련이죠.

 

React는 불변성이라는 개념을 가져왔습니다. 긴 시간이 아니랑 원본데이터를 보호하고, 복사를 통해 원본을 건드리지 않고 작업하도록 만든 개념입니다.

 

 불변성이라는 것은 원본데이터의 변경을 금지하는 것 입니다. 이를 지키고자 React에서는 기존 원본데이터를 직접 수정하지 않고 새로운 데이터를 만들어서 사용합니다.

const numArr = [1, 2, 3, 4, 5];
//스프레드 문법을 통한 새로운 배열 생성
const newNumArr = [...numArr];

const obj = {
    num1: 1,
    num2: 2,
    num3: 3
};

const newObj = {
    ...obj
};

const newObj2 = {
    num3: 5,
    ...obj
}

 

이걸 보면서 생각한 것은, 복잡하다는 점입니다. 이거보다 더 복잡해진다면? 불변성을 유지하는게 쉽지 않겠죠.

const complexObj = {
    id: 1,
    name: 'a',
    objInside: {
        number: 1,
        checked: true
    }
};

const newComplexObj = {
    ...complexObj,
    name: 'b',
    objInside: {
        ...complexObj.objInside,
        checked: false
    }
}

 

불변성을 유지하기 힘든 구조의 객체는 immer 라이브러리를 사용해서 불변성 유지할 수 있습니다. immer 라이브러리를 사용하면 불변성을 신경쓰지 않는 것처럼 코드를 작성하지만 코드의 불변성 관리는 잘 됩니다. 또한 immer 라이브러리 설치는 터미널에서 아래와 같은 명령어를 입력하면 됩니다.

#immer 라이브러리 설치
npm install immer