Immutability helper

오늘은 페이스북에서 객체나 배열을 더 쉽게 수정하기위해 만든 immutable.js와 

이를 spread연산자를 이용하여 다른 방법으로 풀어내는 spread.js를 소개하겠습니다.

React.js에서 State값을 변경시킬 때에 setState 함수를 이용하여 변경하였습니다.

이 부분에 배열이나 객체 내의 키를 변경하려 할 때 쉽게 수정하는 방법이 있는데,

이를 Immutability helper라 합니다.

---

설치 

npm install --save react-addons-update

사용법

import update from 'react-addons-update'; // ES6
var update = require('react-addons-update'); // ES5 with npm

본격적으로 시작 하기에 앞서 수정할 때에 주로 사용하는 함수들을 먼저 알아보겠습니다.

1. concat() 함수 

- 배열에 값을 추가하는 역할을 한다. 

<update와 같이 사용할 함수> 

---

2. splice 함수 : 들어오는 배열에 있어서 인덱스 요소부터 시작해서 n개 데이터를 제거

3. set 함수 : 데이터 값을 변경할 때 쓰이는 함수입니다.

4. push 함수 : 데이터를 추가할 떄 쓰입니다. 

예시 

this.setState({

list : this.state.list.concat(newObj); 

});

그렇다면 이제 위에서 선언한 update를 활용하여 쉽게 배열이나 객체를 변경해보겠습니다.

* update의 첫 번째 인자는 바꿀 대상 (배열 / 객체) , 두 번째 인자는 어떻게 바꿀 건지 매커니즘이 들어가는 곳입니다. *

위 변경 함수 (2,3,4)를 활용하실 때 꼭 배열 형태로 [ ] 묶어서 넣어주시길 바랍니다!

1. splice 함수를 활용한 배열 내 값 자르기 (Indexing)

// es6

import update from 'react-addons-update';

let array = [1,2,3,4,5];

let changeArray = update(array, 

{

$splice : [ [0,1] , [1,1] ]

});;

function printArray(data) {

console.log(JSON.stringify(data,null,2));

}

printArray(changeArray);

---

다음 코드를 설명드리자면 array 배열을 immutability helper를 이용하여 changeArray

로 변경하는 코드라 할 수 있다.

update ( 첫 번째 인자 == 바뀔 배열 내용 , 두 번째 인자 == 어떻게 바꿀 건지 매커니즘) 

두 번째 인자를 확인하면 

$splice를 통해서 인덱싱을 통한 배열의 요소를 지우는 과정인데,

[0,1] 은 0번째 배열 요소인 1과 1번째 배열 요소인 2 전까지

이므로 1이 지워지게 됩니다. 

(범위 잘 체크해주세요!)

[0,1]으로 1이 지워진다면 그 다음 요소인 2가 인덱스 0번을 갖고 3이 인덱스 1을 갖게 됩니다.

그에 따라 [1,1] 은 3이 지워지게 됩니다.

그렇다면 이번엔 $set을 이용해서 배열 요소의 값을 바꿔보겠습니다.

2. set 함수를 이용하여 배열 요소의 값을 변경시키기 & Object 변경하기 

// es6

import update from 'react-addons-update';

let info = [

{ 

name : 'haams',

age : 27

},

{

name : 'kim',

age : 23

},

{

name : 'hwang',

age : 26

}]

// index == 0,1,2 (배열 인덱스)

let changeInfo = update(info, 

{

[0] : {

name : { $set : 'seongho' },

age : { $set : 26

}

});;

function printArray(data) {

console.log(JSON.stringify(data,null,2));

}

printArray(changeInfo);

---

다음과 같이 진행하게 되면 배열 요소들의 데이터 값들을 변경하게 됩니다.

배열은 바뀌는 요소의 인덱스 값을 넣어줬다면

ex:) let changeInfo = update(info, 

{

[0] : {

name : { $set : 'seongho' },

age : { $set : 26

}

});;

객체는 저 인덱스 값을 넣는 부분을 객체의 Key 값을 넣어주면 된다.

예제 

function printData(data) {

  console.log(JSON.stringify(data, null, 2))

}

let object = {

  a: '1',

  b: '2',

  c: {

    d: '3',

    e: '4',

    f: {

      change_this_value: '0',

      this_stays_same: '6'

    }

  }

}

let changed = {

   a : { $set : '변경할 a 값' },

   b : { $set : '변경할 b 값' }

};

let changed2 = {

c : {

d : {

$set : '3a'

},

e : {

$set : '4e'

},

f : {

change_this_value : { $set : '변화할 값' }

}

}

}

printData(changed);

printData(changed2);

---

object로 선언된 객체에는 크게 a,b,c의 객체 키 값을 가지고 있습니다. 

해당 키에 배정된 값을 수정하기 위해선 앞서 설명한 방법을 쓰면 됩니다.

(changed 변수 선언 시 a,b 의 값을 바꾸는 방법을 확인하시면 됩니다.)

changed2를 확인하면 내부 변수들은 어떻게 변경하는 지 감이 오실 겁니다.

3. push 함수를 활용한 배열 내 값 추가하기 

import update from 'react-addons-update';

let numArray = [1,2,3,4,5] ;

let changeArray = update(numArray,

{

$push : [ 6 , 7 ] 

}

)

console.log(JSON.stringify(changeArray)); 

---

push는 앞서 $splice로 값을 제거(잘라내기) 하거나 $set을 통하여 값을 변경하는 것보다 더 쉬울것이다.

다음과 같이 작업을 해주면 되며 6,7이 numArray의 배열에 추가되게 될 것이고 이로 새로운 배열인 changeArray를 만들어낼 것입니다.

Spread.js 부분은 다음 포스팅에 이어서 하도록 하겠습니다. 

추가로 Immutability helper를 활용하여 실제로 어떻게 코드가 진행 되는지 확인해보겠습니다. 

관련 코드는 미리 공지하겠습니다. 다음 포스팅때는 더 파헤쳐보겠습니다! 

감사합니다.

https://github.com/Haamseongho/React_Study/tree/haams/contact