memo (2) 썸네일형 리스트형 [Fast Campus , React] 14. React.memo를 이용한 성능 최적화 React.memo를 이용한 성능 최적화 전에 사용한 A, B컴포넌트 비교 소스를 기준으로 성능 체크 및 개선목표. [Fast Campus , React] 13. 확장프로그램, 성능측정 app 개발 B컴포넌트의 문제점? List, ListItem, Message 컴포넌트로 나뉘어 있는데, 재사용성의 목적도 있지만 각 컴포넌트의 렌더링의 최적화를 위해서이기도 함. Input에서 글을 쓸 때 원래는 Message 컴포넌트와 그 State를 가지고 있는 App 컴포넌트만 렌더링이 되어야 하는데, 상관이 없는 다른 부분까지 렌더링 되고 있다. React.memo 적용. 원하는 컴포넌틀르 React.memo로 감싸주면 적용이 된다 const Message = React.memo( ({message}) => { r.. Coding Apple, React 강좌 내용 정리.19 - lazy loading / React devtools, memo (재렌더링 방지) lazy loading / React devtools 1. 되도록이면 함수나 오브젝트는 별도로 선언해서 사용. 메모리문제를 어느정도 보완이 가능하다 ex) function Clicked() { ... } lazy , Suspense 이용 import {lazy, Suspense} from 'react' let Detail = lazy( ()=> { return import('./Detail.js') } ); //아니면 이렇게 쓰기도. lazy( ()=> import('./Detail.js') ) → Detail를 호출/사용할 때 import 시킨다. 대부분 Suspens라는 걸 같이 쓰는데 => React Dev Tools 크롬 확장 프로그램으로 설치가능. React 내부 구조 보기 데이터 조작 렌더링 .. 이전 1 다음
