3줄요악
불변성이란 무질서한 수정과 삭제로 인한 데이터의 원본 훼손을 막는 것. 가변성이 나쁜것이 아님.
React는 이전 데이터와 바뀐 데이터를 비교해 변화가 있다면 렌더링하는 원리로 동작하기 때문에 불변성이 중요.
React에선 불변성을 통해 변화를 감지하고 다시 렌더링 하는 시기를 결정한다.
불변성 (Immutability)
- 무질서한 수정과 삭제로 인한 데이터의 원본 훼손을 막는 것.
Javascript 상수와 변수, 불변값 가변값의 비교
- 상수 vs 변수 : 변수 영역 메모리의 변경 가능성 여부.
- 불변값 vs 가변값 : 데이터 영역 메모리의 변경 가능성 여부.
불변값 가변값 예시
- 불변값 : 숫자, 문자열, boolean, null, undefined, Symbol
- 가변값 : 참조형 데이터
React에서의 불변성
데이터 변경 방법
- 객체 변경을 통해 데이터 수정 : 가변성
var player = {score: 1, name: 'Jeff'};
player.score = 2;
// 이제 player는 {score: 2, name: 'Jeff'}입니다.
- 객체 변경 없이 데이터 수정하기 : 불변성
var player = {score: 1, name: 'Jeff'};
var newPlayer = Object.assign({}, player, {score: 2});
// 이제 player는 변하지 않았지만 newPlayer는 {score: 2, name: 'Jeff'}입니다.
// 객체 spread 구문을 사용한다면 이렇게 쓸 수 있습니다.
// var newPlayer = {...player, score: 2};불변성의 장점
1. 변화를 감지함
객체가 직접적으로 수정되기 때문에 복제가 가능한 객체에서 변화를 감지하는 것은 어렵다. 감지는 복제가 가능한 객체를 이전 사본과 비교하고 전체 객체 트리를 돌아야 한다. 불변 객체에서 변화를 감지하는 것은 상당히 쉽다. 참조하고 있는 불변 객체가 이전 객체와 다르다면 객체는 변한 것이다.
2. React에서 다시 렌더링하는 시기를 결정함
불변성의 가장 큰 장점은 React에서 순수 컴포넌트를 만드는 데 도움을 준다는 것이다. 변하지 않는 데이터는 변경이 이루어졌는지 쉽게 판단할 수 있으며 이를 바탕으로 컴포넌트가 다시 렌더링할지를 결정할 수 있다.
