[ReactJS] 튜토리얼(Tutorial) - 7

튜토리얼(Tutorial) - 7

불변성(Immutability)

앞선 포스팅에서 배열에 저장된 값을 수정하기 위해 slice 메소드를 사용했다.

이는 불변성을 유지하기 위함이었는데, 왜 불변성이 react에서 중요한 걸까

/* data change with mutate */
var player = {score: 1, name: 'Jeff'};
player.score = 2;
// Now player is {score: 2, name: 'Jeff'}
 
 
/* data change without mutate */
var player = {score: 1, name: 'Jeff'};
 
var newPlayer = Object.assign({}, player, {score: 2});
// Now player is unchanged, but newPlayer is {score: 2, name: 'Jeff'}                                    
 
// Or if you are using object spread syntax proposal, you can write:
// var newPlayer = {...player, score: 2};

일반적으로 데이터를 변경하기 위한 방법은 두가지가 있다.

첫번째는, 변수의 값을 직접 변경하여 데이터를 변경하는 것이다.

두번째는, 데이터를 원하는 변경 내용이 포함된 개체의 새 복사본으로 대체하는 것이다.

위의 코드를 보면 최종 결과값은 동일하다.

그러나 두번째 방법이 컴포넌트 및 응용 프로그램의 성능을 향상 시키는데 이점이 많다.

1. 손쉬운 실행취소/다시실행

불변성을 유지하면 복잡한 기능을 훨씬 쉽게 구현할 수 있다.

예를 들어, 틱택토 게임을 구현 하면서 우리는 게임 순서를 자유롭게 넘나들도록 구현할 것이다.

데이터를 변경하지 않으면 이전 버전에 대한 데이터 참조를 유지할 수 있고 필요하다면 이를 전환할 수도 있다.

2. 변경 사항 추적

만약 객체가 변경된다면 무엇이 바뀌었는지 추적하기 상당히 까다롭다.

불변성을 유지하며 객체를 복사해서 사용했다면, 이전 데이터와 비교하여 무엇이 변경되었는지 추적이 가능하다.

단순히 객체가 변경되었는지 알아보는 것은 더 쉽다.

참조되는 객체가 이전 객체와 다르면 변경된 것이다.

3. React에서 다시 랜더링할지 결정

리액트에서 불변의 가장 큰 이점은 재 랜더링 여부를 결정할 때이다.

불변의 데이터는 변경이 이루어졌는지를 보다 쉽게 판별할 수 있기 때문에 

컴포넌트가 언제 다시 랜더링 되어야 할지를 결정하는데 도움이 된다.