React 성능 개선 방법, Shallow and Deep Comparison
React 성능 개선 방법 1. 리액트의 작동과 Shallow Comparison React에서의 작동 React에서는 업데이트 될 때마다 렌더링을 진행하고, VDOM에서 필요한 요소만 확인하여 실제 DOM에는 필요한 것들만 렌더한다. 그래서 업데이트 될 때마다 리액트는 렌더링이 진행되도 html 전체가 렌더링 되는 것이 아니라 필요 부분만 렌더링 되기 때문에 개선된 성능으로 렌더링되어 화면에 나타나는 것이다. 하지만, 업데이트 시 클래스형 컴포넌트 내부의 render메서드나 함수 컴포넌트등은 호출이 계속된다. 이것은 shallow comparison(얕은비교)를 시용하여 성능을 좀 더 개선할 수 있다. shallow comparison를 활용하면 object의 최상위 데이터(props나 state)가 ..
Front-end/REACT
2020. 12. 23. 11:45
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 우아한테크코스
- React
- 카카오
- python
- 네트워크
- 개발공부일지
- DB
- 우테코수업
- JPA
- 코드스쿼드
- TCP/IP
- Transaction
- 내부코드
- TIL
- 모의면접준비
- 운영체제
- 회고
- 인증
- 알고리즘
- OS
- javascript
- JS
- 글쓰기미션
- 학습로그
- java
- 마스터즈코스
- 객체지향
- CS
- 월간회고
- Spring
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
글 보관함