TIL 4 React - 불변성(Immutability)

불변성(Immutability)

React를 공부하다보면 불변성(Immutability)의 중요성을 많이 언급하는 것을 볼 수 있습니다. 그렇다면 오늘은 불변성은 무엇이고 왜 중요한지에 대해 오늘 알아보겠습니다.

우선, 불변성이란 객체가 생성된 이후에 그 상태를 변경할 수 없는 디자인 패턴을 말합니다. React에서는 객체를 참조하여 전달을 하기 때문에 참조를 당한 객체들의 원본이 변형되는 것은 큰 문제를 야기할 수 있습니다.

그래서 객체를 불변객체로 만들어 원본의 데이터를 직접적으로 변경을 방지하고, 객체의 변경이 필요하다면 복사를 해서 그 데이터를 다룹니다.

아래의 예시를 통해 알아보겠습니다.

//원본 객체가 변형된 경우
const array1 = [1,2,3,4];
const array2 = array1;
array2.push(5);

console.log(array1) // [1,2,3,4,5]
console.log(array2) // [1,2,3,4,5]

//원본 객체가 변형되지 않은 경우
const array1 = [1,2,3,4];
const array2 = [...array1, 5];
array2.push(5);

console.log(array1) // [1,2,3,4]
console.log(array2) // [1,2,3,4,5]

첫 번째 경우에는 array1과 array2의 참조하고 있는 배열의 주소값은 같습니다. 그래서 array2에 .push(5)를 했을 때 array1의 배열의 내용도 바뀌게 되었습니다. 하지만 두 번째 경우에는 참조하고 있는 배열의 주소값이 다른, 새로운 객체를 만든 것입니다.

불변성 유지하기

1. 전개 연산자

handleOnClick = () => {
    this.setState({
      todoList : [...state.todoList,'new']
      })
  }

2. 배열 메소드

배열 메소드 중 원본의 값이 바뀌게 메소드push(), pop(), unshift(), shift() ..etc들은 사용을 지양하고 바뀌지 않는 메소드 map(),concat(), join(),..etc 들을 사용한다.

var array1 = [1,2,3];
array1.push(4);
console.log(array1); //[1,2,3,4] 출력 원본 바뀜

let array2 = [1,2,3];
console.log(array2.concat(4,5)); //[1,2,3,4,5] 출력
console.log(array2); //[1,2,3]출력 원본 안바뀜