![가변객체
• 자바스크립트의 Object는 생성 후, 변경 가능
• ES5 이하: Array, Object, etc
• ES6 이상: Array, Object, Map, Set, etc
var testStr = "str";
testStr.substr(0, 1); // “s"
console.log(testStr); // "str"
var testArr = ["a", "r", "r"];
testArr.pop(); // "r"
console.log(testArr); // ["a", "r"]
• 참조를 공유하는 모든 곳에 부작용 발생
11](https://image.slidesharecdn.com/reactperformance-190319085731/85/-11-320.jpg)
![Immutable.js
• 변경이 일어나면 새로운 객체를 반환
• ex 배열 수정
const immutableArray = Immutable.List([]);
const immutableArray2 = immutableArray.push(1);
console.log(immutableArray === immutableArray2); // false
// immutableArray = [];
// immutableArray2 = [1];
13](https://image.slidesharecdn.com/reactperformance-190319085731/85/-13-320.jpg)
불변객체 적용으로 리액트 성능 최적화
- 1. 불변객체 적용으로 리액트 성능 최적화 송헌용
- 2. 발표에 사용할 예제 2
- 3. 컴포넌트 파일 구조 3 • App: 엔트리 포인트 • Container: 자식들을 감싸고 있는 부모 • Title: 타이틀 영역 • AddLi: inputbox 영역 • TodoLi: 리스트 중 개별 영역
- 4. 컴포넌트 구조 4
- 5. 렌더링 프로세스 1. 초기 props/state로 render 메소드 실행 2. 외부에서 데이터 받음 (ex. AJAX) 3. 전달 받은 컴포넌트에서 setState 메소드 실행 • 내부 트리거에 의해 render 메소드 자동 실행 4. 기존 대비 바뀌는 부분만 렌더링 • virtual DOM 내부적으로 판단 5
- 6. 문제점1 • 부모에서 setState 메소드를 실행할 경우 • 딸려있는 모든 자식의 render 메소드가 실행 • 결과적으로 바뀌든 바뀌지 않든 실행 • virtual DOM에서 판단하는 과정이 성능에 영향 6
- 7. shouldComponentUpdate • 컴포넌트의 업데이트 가능성을 미리 알려주는 메소드 • 기본 값은 true • 만약 false일 경우 아래의 메소드는 실행 X • componentWillUpdate • render • componentDidUpdate 7
- 8. 사용 예 • ex1 shouldComponentUpdate(nextProps, nextState) { return ( this.props.text !== nextProps.text ); } • ex2 shouldComponentUpdate(nextProps, nextState) { return ( this.state.todos !== nextState.todos ); } 8
- 9. 문제점2 9 • 비교 대상이 참조 타입(Array, Object...)이라면? • 항상 객체 복사를 통해 새로운 객체 생성 • 그렇지 않으면 참조가 같아서 SCU 비교 불가
- 10. 문제점2 10 • 객체의 구조가 깊은 구조라면? • this.state.todos.obj1.value !== nextState.todos.obj1.value || this.state.todos.obj2.value !== nextState.todos.obj1.value • SCU 비교 로직이 복잡해짐 • this.state.todos !== nextState.todos • 훨씬 간단
- 11. 가변객체 • 자바스크립트의 Object는 생성 후, 변경 가능 • ES5 이하: Array, Object, etc • ES6 이상: Array, Object, Map, Set, etc var testStr = "str"; testStr.substr(0, 1); // “s" console.log(testStr); // "str" var testArr = ["a", "r", "r"]; testArr.pop(); // "r" console.log(testArr); // ["a", "r"] • 참조를 공유하는 모든 곳에 부작용 발생 11
- 12. Immutable.js • 페이스북에서 만든 라이브러리 • 리액트와의 의존성 없음 • 어느 곳에서나 사용 가능 • 원본 객체는 수정되지 않는다는 컨셉 • 새로운 객체 생성 • 다양한 자료구조 • List, Stack, Map, OrderedMap, Set, OrderedSet, Record 등 12
- 13. Immutable.js • 변경이 일어나면 새로운 객체를 반환 • ex 배열 수정 const immutableArray = Immutable.List([]); const immutableArray2 = immutableArray.push(1); console.log(immutableArray === immutableArray2); // false // immutableArray = []; // immutableArray2 = [1]; 13
- 14. immutability-helper • react-addons-update의 새로운 이름 • 리액트와의 의존성 없음 • 어느 곳에서나 사용 가능 • 원본 객체는 수정되지 않는다는 컨셉 • 새로운 객체 생성 • Array, Object에만 대응 14
- 15. 결론 • 문제점1 • 부모 쪽 데이터 갱신 -> 자식의 모든 render가 실행 • 해결: SCU 메소드 활용 • 문제점2 • 참조 타입의 수정 부작용 • 해결: Immutable.js / Immutability-helper 활용 15
- 16. 결론 • 렌더링 퍼포먼스 향상 16
- 17. FE팀 메일링으로 질문 환영합니다 • Vanilla(= Native) • Angular • Vue • React 17
- 18. 참고 18 • 컴포넌트 성능 최적화 • 링크: 리액트 가이드 • Immutability Helpers • 링크: 리액트 가이드 • state 객체를 immutable.js로 다루기 • 링크: 리액트 가이드