250x250
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- 자바스크립트 엔진 v8
- 항해99
- toggle-btn
- 알고리즘
- Js module
- 리액트 메모
- js배열 알고리즘
- chromatic error
- 타입스크립트
- 웹 크롤링
- v8 원리
- 항해99 사전스터디
- 웹팩 기본개념
- 테스트 코드 툴 비교
- 항해99 미니프로젝트
- 함수형 프로그래밍 특징
- 실행컨텍스트
- FP 특징
- gql restapi 차이
- 코어자바스크립트
- 리액트 렌더링 최적화
- 리액트
- 렌더링 최적화
- JS module system
- 리덕스
- 리액트 메모이제이션
- jwt
- this
- next js
- 항해99 부트캠프
Archives
- Today
- Total
목록리액트 렌더링 최적화 (1)
Jaeilit

렌더링과 리렌더링 최적화(Feat. 메모이제이션) 리액트에서 렌더링이란props와 state를 기반으로 컴포넌트를 구성하는데 이를 요청하고 제공하는 프로세스를 의미한다.브라우저에서도 렌더링이라는 단어를 사용하기 때문에 리액트 렌더링도 흔히 비슷하게 화면에 그리는 페인팅 과정이라고 오해할 수 있는데 리액트에서의 렌더링은 컴포넌트를 호출하는 것이다. 리액트는 렌더링을 먼저 완료하고 DOM을 업데이트한 후 브라우저가 리페인팅한다. 렌더링 프로세스렌더링 프로세스 자체는 트리거, 렌더, 커밋 총 3단계로 구성된다. 먼저 렌더링을 하기 위해서는 아무때나 시도때도 없이 렌더링을 할 수 없으니 이때는 꼭 렌더링 해주세요! 라는 트리거 장치가 필요하다. 그리고 당연히 이 트리거가 되는 조건이 있다. 렌더링을 시키는 트리..
TIL
2024. 5. 2. 16:58