리액트(React) - 리액트와 불변성

리액트를 공부하면서 쓰는 글이니 오류가 있을 수 있습니다. 있다면 알려주시면 감사하겠습니다!

 

리액트에서는 컴포넌트에서 업데이트 되는 상태는 불변성이 중요합니다. 상태 관리되는 데이터를 이용해서 값이 변경이 되었는지 확인하여 리액트가 다시 렌더링 할지 안할지 정하기 때문입니다.

 

따라서 값이 변경이 되었는지 확인하려면 기존의 데이터는 그대로이고 같은 데이터 타입의 변경된 값이 있는 데이터가 있어야합니다.

 

불변성은 이렇게 기존 데이터를 변경되지 않는것을 말합니다.

 

먼저 자바스크립트의 원시값을 알아보겠습니다. 자바스크립트에서 원시값은 string, number, boolean, undefined, symbol, null이 있습니다. 원시값은 변경되지 않아 불변성을 가지고 있습니다. 

let a = "bear";
let b = a;

console.log(a); // -> bear
console.log(b); // -> bear

b = "blue";

console.log(a); // -> bear
console.log(b); // -> blue

코드를 보면 a는 bear값을 가지고 있고 b에 a를 넣어주었습니다. 이때 a는 bear를 가지고 있기 때문에 같은 bear를 출력합니다.

 

다음 b에 새로운 값을 넣어주고 확인하면 값이 다르게 나옵니다. 이유는 원시값(primitive value)이기 때문입니다.

b 변수에 a를 줄때 주소를 가져오는게 아닌 a의 값을 복사 해서 새로운 주소를 만들어 bear를 만들어 줍니다.

 

따라서 b에 새로운 값을 넣어도 a는 변경되지 않고 또 다시 blue라는 새로운 값이 만들어 b에 들어갑니다.

실제로 사용될때는 각 데이터 타입의 래퍼 객체로 만들어져 사용이 됩니다. 값이 필요할때 자동으로 valueOf() 메서드가 호출되어 원시값을 반환합니다.

 

반면 배열과 객체는 값을 복사하여 새로 주지 않고 주소를 그대로 넘겨줍니다.

let a = {
    color: "blue"
}

console.log(a.color); // -> blue

let b = a;
b.color = "green";

console.log(b.color); // -> green
console.log(a.color); // -> green

 

자바스크립트에서 기존의 데이터를 직접 변경하지 않고 새로운 데이터를 만드는 방법은 여러가지가 있습니다.

 

배열과 객체가 아닌 변수는 불변성을 가지기 때문에 새로운 데이터가 만들어지고 배열과 객체를 불변성을 지킬수 있는지 알아봅니다.

 

배열의 프로토타입 함수인 slice(), Object.assign()같은 메소드를 이용해서 배열을 얕은복사를 할 수 있습니다.

 

또한 전개구문(Spread Syntax)을 이용해 얕은 복사를 할 수 있습니다. 

let a = ["a","b","c"];
let b = [...a];

console.log(b); // -> ["a", "b", "c"]

let c = {
  a:"a",
  b:"b",
  c:"c"
}

let d = {
  ...c
};

console.log(d); // -> {a: "a", b: "b", c: "c"}

이 전개 구문은 안쪽에있는 배열이나 객체도 복사를 하지만 최상위 객체에만 새로운 주소가 부여되고 안쪽 값들은 모두 같은 주소를 사용합니다. 

 

따라서 모든 내용을 복사하고 싶다면 전개구문을 계속해서 사용하거나 깊은복사를 해야합니다. 깊은 복사가 필요한경우 JSON.stringfy(), JSON.parse()를 사용하여 다시 객체로 변환시키던가 아니면 불변성을 도와주는 immer같은 라이브러리를 사용해야 합니다.

 

이뿐만아니라 map(), reduce(), concat() 같은 메서드를 이용해서 기존 데이터를 변경하지 않고 새로운 데이터를 만들어낸다면 불변성을 지키고 있는것입니다.

 

 

이처럼 불변성을 유지하여 리액트를 좀더 효율적이고 최적화를 시킬수 있습니다. 

 

참고

리액트를 다루는 기술(개정판) - 김민준 지음