Notice
Recent Posts
Recent Comments
Link
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Tags
more
Archives
Today
Total
관리 메뉴

개발블로그

Immutable.js (2018.06.26) 본문

Immutable.js (2018.06.26)

학교옆메추리 2020. 5. 28. 13:33

What’s immutable.js?

자바스크립트 상에서 데이터를 Immutable하게 관리할 수 있도록 도와주는 라이브러리.

Immutable Data : ‘변하지 않는(수정할 수 없는)’ 데이터.
데이터를 Immutable하게 관리한다는 말은 수정하려면 무조건 새로운 객체를 만들어야 한다고 강제하는것과 같다. (필자의 개인적 생각이다…)

Immutable data in React

React는 State 또는 Props의 변경을 감지하면 해당 컴포넌트를 리랜더링한다.
만약, State(or Props)가 객체 형태라면, 그 내부의 값이 변경되어도 레퍼런스 값이 같기 때문에 컴포넌트가 리랜더링되지 않는다.

이렇게 써진 글을 꽤나 많이 봤는데, 몇번 보다보니 새로운 질문이 하나 떠올랐다.

State를 변경시킨 직후에 setState()를 바로 해주면 되는거 아니야?

답은, 아니다.
우리가 하나의 함수 내에서 State를 변경하고, 직후에 setState()해주는 작업을 여러번 반복한다고 가정하자.

const myData = this.state.data;myData[0] = 'foo';this.setState({ data: myData }); // -----------(1)// do something...
// ...
const someNewData = someFunc();this.setState({ data: someNewData }); // -------(2)

myData[1] = 'bar';
this.setState({ data: myData }); // -----------(3)

(3)에서 우리는 somNewData의 값을 잃어버린다.
물론 someNewData[1] = ‘bar’; 라고 했다면 원하던 방향으로 진행될 수도 있었겠다. 중요한것은 이런 실수를 범할 수 있기 때문에 State를 mutable하게 관리하는 것을 지양하자는 것이다.

이쯤에서 또 궁금하다.

난 immutable.js 안쓰고도 State관리 imuutable하게 잘 할 수 있는데?

자신을 믿지 않는 것이 좋다.
immutable.js는 State를 immutable하게 관리하는 것을 편리하게 해준다.

뭐가 편리한데?

필자가 immutable.js에 대해 공부하면서 가장 많이 든 생각…
지금까지 열심히 setState() 쓰면서 불편하다고 생각한적 없는 것 같은데…?

Without immutable.js

공부해보니 필자가 불편함을 느끼지 못했던 것은 state객체 내부에 또 다른 객체를 둔다던지 하는 등의 복잡한 형태를 쓰지 않았기 때문인듯 싶다.

예를 들어, state내부 객체배열중 한 객체의 원소값을 바꾸고 싶다고 가정하자
( 내부 객체배열중 한 객체의 원소값… 복잡한 말이지만, 코드를 보면 쉽게 알 수 있으리라 생각한다.)

state = {
  items: [
    {id: 1, name: "Kevin"},
    {id: 2, name: "Bob"},
    …,
    {id: 10, name: "Andy"}
  ]
}

items: [
  {id: 1, name: "Kevin"},
  {id: 2, name: "Bob"},
  …,
  {id: 10, name: "Andy"}
]
}// idx번째 객체의 name값을 변경하고 싶다…!

this.modifyName = idx => {
	const { items } = this.state;
    const newItems = [
    	items.slice(0, idx),
	{ id: items[idx].id, name: "John"},
	items.slice(idx + 1, items.length)
	];
    
    this.setState({items: newItems})
}

 

굉장히 번거롭다.

  1. 새로운 배열을 선언하고(newItems)
  2. idx(바꿀 인덱스)직전까지 원래의 배열을 복사하고,
  3. idx에 해당하는 객체를 수정하고,
  4. idx직후부터 원래의 배열을 다시 복사하고,
  5. setState 해준다.

with immutable.js

위 코드를 immutable.js를 사용하면 3줄만에 해결할 수 있다.
(심지어 속도도 개선할 수 있다고 한다…)

Items = Itmes.update(idx, (item) => {
	return item.set('tempValue', !item.get('tempvalue')); 
});

Use immutable.js

이제 immutable.js를 사용하는 방법을 알아보자!

 

'' 카테고리의 다른 글

JS prototype (2018.10.01)  (0) 2020.05.28
Redux (2018.06.30)  (0) 2020.05.28
CORS (2018.06.24)  (0) 2020.05.28
Webpack (2018.06.23)  (0) 2020.05.28
BABEL (2018.06.22)  (0) 2020.05.28