들어가기 전에

이번 수업은 shouldComponentUpdate 를 사용하실 분들만 보셔도 됩니다.

이번 시간에는 원본이 변하지 않는 immutable 에 대해 살펴보겠습니다.

학습목표

배열과 객체를 복제할 수 있고, immutable 의 개념을 이해할 수 있습니다.

핵심단어

• immutable
• 불변

강의듣기

"원본을 바꾸지 않는다" 라고 하는 개념을 불변성, 영어로 immutable 이라고 합니다.

concat()을 사용할 수도 있지만 이 경우 모든 연산에 대해서 불변인지 가변인지를 판단해야 합니다. 

간단하게 Array.from() API를 사용하면 새로운 배열이 만들어집니다.

var a = [1,2];
var b = Array.from(a);
console.log(a,b,a==b);

위 코드의 실행 결과를 확인해보면 a와 b의 출력은 동일하지만 a와 b는 같지 않은 것을 알 수 있습니다.

즉, a와 b는 내용이 같을 뿐 완전히 다른 배열입니다,

var a = [1,2];
var b = Array.from(a);
b.push(3);
console.log(a,b,a==b);

그렇기 때문에 위 코드처럼 b.push(3) 코드를 추가하여 b 배열에 3을 넣게 될 때 b 배열에만 추가되는 것입니다.

Array.from() 을 사용한 경우에는 push()를 해도 원본 배열인 a 에 영향을 주지 않습니다.

우리 애플리케이션에도 concat() 대신 Array.from() 을 적용할 수 있습니다.

_article = <CreateContent onSubmit={function(_title, _desc){
    // add content to this.state.contents
    this.max_content_id = this.max_content_id+1;
    var newContents = Array.from(this.state.contents);
    this.state.contents.push(
      {id:this.max_content_id, title:_title, desc:_desc}
    );
    this.setState({
      contents:newContents 
    });
    console.log(_title, _desc);
}.bind(this)}></CreateContent>

변경하고자 하는 데이터인 this.state.contents 데이터를 Array.from() 을 통해 복사합니다.

이렇게 복제한 newContents에 새로 추가하고 싶은 data를 push() 하도록 변경합니다.

변경한 코드를 실행시키면 정상적으로 동작하고, 다른 목록을 클릭할 경우 reder() 함수가 호출되지 않는 것을 확인할 수 있습니다.

Array.from()은 배열의 경우에만 쓸 수 있습니다.

객체인 경우에 객체 내용을 바꾸지 않고  새로운 복제된 객체를 만들고 싶다면 Object.assign() 을 사용합니다. 

var a = {name:'egoing'};
var b = Object.assign({},a);
console.log(a,b,a===b);

Object.assign()의 첫 번째 인자로는 빈 객체 혹은 새로운 객체를 주고, 두 번째로 a 객체를 줍니다.

위 코드를 Console 창에 확인해보면 a 와 b 의 출력 내용은 동일하지만, 서로 같은 것은 아닌 것을 확인할 수 있습니다.

var a = {name:'egoing'};
var b = Object.assign({},a);
b.name = 'leezche'
console.log(a,b,a===b);

b 객체의 name 을 'leezche'로 변경하고 실행시키면 a와 b가 다른 것을 정확히 확인할 수 있습니다.

즉, Object.assign() 을 통해서 객체를 복제할 수 있고, 배열은 Array.from() 을 통해서 할 수 있다는 겁니다.

추가로 첫번째 인자가 빈 객체가 아닌 경우의 출력도 확인해보겠습니다.

var a = {name:'egoing'};
var b = Object.assign({left:1, right:2},a);
b.name = 'leezche'
console.log(a,b,a===b);

첫번째 인자인 객체에 a 객체의 name이 추가된 것을 볼 수 있습니다.

이렇게 배열과 객체를 복제하는 다양한 방법 중 한가지 방법을 알아보았습니다. 

우리가 사용한 state를 변경한 방식을 살펴보겠습니다.

우리 코드에서 this.setState( { mode : 'welcome' }) 과 같은 코드는 원본을 교체한 것이라고 할 수 있습니다.

this.state.contents.push() 를 수행한 것은 contents의 원본에 내용을 추가한 것입니다.

this.state.contents.concat() 를 사용한 방식은 원본을 교체한 것입니다.

Array.from()을 사용한 것도 원본을 복제하여 그것으로 변경한 것이기 때문에 원본을 교체한 것입니다.

이러한 내용이 까다로우시거나 좀 더 알아보고 싶으시다면 immutable, immutable.js 등 을 검색해보십시오.

자바스크립트의 배열을 사용할 때 push()는 원본을 바꾸고 concat() 은 원본의 복제본으로 바꾸는 등

명령어들의 일관성이 떨어져서 해당 내용을 기억해야 하는 필요성이 있습니다.

이때 immutable js 와 같은 라이브러리를 쓰면 유사 배열, 유사 객체 같은 것을 만들고 이를 제어하는 방식은 반드시 immutable합니다.

무조건 불변이며, 무조건 원본을 바꾸지 않고 원본을 복제한 결과로 교체한 것을 리턴해줍니다.

생각해보기

immutable을 공부해보고 자유롭게 정리해보세요.