Immutability (변경 불가성, 불변성) 이란?

 

Immutability 

객체가 생성된 이후 그 상태를 변경하지않는, Immutable(이뮤터블) 하게 다루는 디자인 패턴이다.

리액트에서는 시간적 비용이 어느정도 들더라도, 객체를 불변객체로 만들어 프로퍼티의 직접적인변경을 방지하고, 객체의 변경이 필요한 경우에는 새로운 객체로 복사하여 그 값을 다루도록 한다.

 

특히 리액트에서는 상태(객체)를 참조 형태로 전달하고 전달받기 때문에, 참조를 통해 전달된 객체들이 예기치 않게 변경되었을때, 프로그램 전반적으로 큰 오류를 야기하는 가능성이 있다.

변경이 이루어진 해당 객체를 구독하고있는 모든 컴포넌트와 로직에 영향을 끼친다. 

 

 

객체, 상태의 불변성을 유지하며 객체를 합성하는 방법들 

  

1) 스프레드 연산자 활용

handleClick(){
	this.setState(state => ({
    	info_list: [...state.info_list, 'my value...'];
    }));
}

 

 

2) Array.concat() 

주어진 배열이나 값들을 기존 배열에 합성해서 새 배열을 반환한다.

const my_array = old_array.concat(new_array);

 

 

3) Object.assign() 

두 객체를 하나의 객체로 합성 하여 새 객체를 반환한다.

const old_obj = {a: 1, b: 2};
const new_obj = {a: 3, c: 4};

const my_obj = Object.assign(old_obj, new_obj);

 

 

4) 깊게 중첩된 json array 의 경우 immutability-helper 등의 라이브러리를 통해 복사 권장