[React] Immutability의 중요성

React의자습서를 훑어보면 재미있는 개념이 있기 때문에 여기서 정리합니다.

이동성(Immutability)은

Cambridge Dictionary 기준
the state of not changing, or being unable to be changed:
반면 mutability는 다음과 같은 의미를 가집니다.
the ability to change or the fact of being likely to change:
mutability에Prefix의'im'을 더하면 뜻이 정반대다.

일본어로 번역하면mutability는 위치 이동성이고,immutability는 변하지 않는 느낌이죠.

React에서

아마도 전체 프로그램 설계에 있어서 나는 Immutability가 공통된 개념이라고 생각한다.
특히 리액트의 튜토리얼에는 다음과 같은 설명이 있다.
일반적으로 변화하는 데이터에 대해서는 두 가지 방법이 있다.첫 번째 방법은 데이터의 값을 직접 조정하여 정음 데이터를 만드는 것이다.두 번째 방법은 수정이 필요한 새로운 데이터를 복제해서 낡은 데이터를 교체하는 것이다.
두 번째 방법은 Immutability라는 개념의 실현을 구현한 것이다.

// １番目のアプローチ
var person = {age: 18, name: 'Taro'};
person.age = 22;
//anotherPerson は {age: 22, name: 'Taro'} に変化

// 2番目のアプローチ
var person = {age: 18, name: 'Taro'};

var anotherPerson = Object.assign({}, person, {age: 22});
// person に変化はなし, 一方で anotherPerson は {age: 22, name: 'Taro'}

Immutability의 장점

데이터 재활용 가능

과거에 정의된 변수를 직접 다시 쓰는 것을 피하기 때문에 이전에 설정한 데이터를 직접 다시 사용할 수 있습니다.

변경의 진위를 알다

대상 내용을 직접 다시 쓰면 변수가 수정되었는지 판단하기 어렵다.
다른 한편, Immutability를 반영하는 대상은 인용 대상과 비교하기만 하면 판단할 수 있다.

React의 렌더링 시기 결정

이로써 React는 PureComponent를 더욱 쉽게 구축할 수 있다.데이터가 변경되었는지 쉽게 알 수 있기 때문에, 언제 구성 요소를 다시 렌더링해야 할지 결정하기 쉽다.
React의 PureComponent
기본 shouldComponentUpdate의 Component를 변경합니다.
Update를 간단하게 진행할지 여부를 판단하기 위한 메커니즘입니다.

SOTD (Summary of the Day)

비즈니스 수업에서도 Immutability라는 단어를 사용했지만 그때는'경쟁업체가 제품과 서비스를 모방하기 어렵게 하는 방법'이라는 지표로 사용되었다.영역을 바꾸어 사용하는 단어의 상하문만 완전히 다르다.
전혀 모르는 언어라도 개발 시뮬레이션 체험을 원활하게 할 수 있어 다행이다.교정이 정말 대단하다.