[React] immutable

immutable

---

리액트는 불변성을 유지해야한다 최적화를 하기위해

기존객체에 push등을 하면 불변성이 깨져

shouldComponentUpdate 에서 가상화dom에대한 최적화를 할수가없다

ex) 

shouldComponentUpdate(nextProps, nextState) {

return nextProps.users !== this.props.users;

}

기존객체를 고쳤으니 비교할대상이없어서 최적화를 할수없게된다

위 코드는 새로운객체를 이용하여 불변성을 유지했기때문에 가능하다

state는 반드시 setState로 변경시켜야한다 그렇지않으면 리렌더링 되지않음

불변성을 유지하기위해 바꿀려는 객체를 새로 생성하고 바꿀 부분이 꽤나 깊은곳에 있으면 코드가 복잡해진다

ex)

const { where } = this.state;

this.setState({ where: { ...where, are: { ...where.are, you: { ...where.are.you, away: false } } } });

그래서 immutable을 사용 보다 편하게 불변성을 유지할수있다

페이스북에서 만듬

객체는 Map, 배열은 List 등 써야한느게 정해져있다 

import { Map, List } from 'immutable';

1. 객체는 Map

2. 배열은 List

3. 설정할땐 set

4. 읽을땐 get

5. 읽은다음에 설정 할 땐 update

6. 내부에 있는걸 ~ 할땐 뒤에 In 을 붙인다: setIn, getIn, updateIn

7. 일반 자바스크립트 객체로 변환 할 땐 toJS

8. List 엔 배열 내장함수와 비슷한 함수들이 있다 – push, slice, filter, sort, concat… 전부 불변함을 유지함

9. 특정 key 를 지울때 (혹은 List 에서 원소를 지울 때) delete 사용

좀더 get,set을 쉽게 사용하는방법으로 Record가 있다

ex) 

import { Record } from 'immutable';

const data = Record({

value1 : '',

value2 : '',

})

data1 = data();

console.log(data1.value1, data1.value2);

data1 = data1.set('value1', 'adsadsf');

console.log(data1.value1);

자세한 내용은

https://velopert.com/3486 참조