[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);
자세한 내용은