React (2) 썸네일형 리스트형 리액트를 다루는 기술 개정판(11장) 랜더링 최적화 메모 1. 크롬 개발자 도구를 통한 성능 모니터링 - 크롬 개발자 도구의 Performance 탭을 사용하여 측정 - 녹화버튼 클릭 후 화면의 변화가 발생하는 이벤트를 발생시킨 후 화면에 변화가 반영되면 Stop 버튼 클릭 - 성능 분석 결과에 나타난 Timings를 열어보면 각 시간대에 컴포넌트의 어떤 작업이 처리되었는지 확인 가능 - App [Update] 박스에 커서를 올려보면 작업이 처리되는데 소요된 시간 확인 가능 2. 클래스형 컴포넌트의 리렌더링을 방지할 때는 ShouldComponentUpdate라는 라이프사이클 사용 vscode prettierrc 및 jsconfig 설정 파일의 경로는 프로젝트 최상위 디렉터리에 위치한다. 1. .prettierrc { "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", "printWidth": 80 } 2. jsconfig.json - 파일 생성 이후 컨트롤+스페이스바 입력시 자동으로 적용 가능 { "compilerOptions": { "target": "es6" } } 이전 1 다음