리액트2 [React] SPA SPA (Single Page Application, 싱글 페이지 애플리케이션) 프로젝트에 라우터 적용 설치 $ yarn add react-router-dom // index.js import { BrowserRouter } from 'react-router-dom' React.DOM.render ( ... ) react-router-dom에 내장되어 있는 BrowserRouter라는 컴포넌트를 사용하여 감싸면 됩니다. 이 컴포넌트는 웹 애플리케이션에 HTML5의 History API를 사용하여 페이지를 새로고침하지 않고도 주소를 변경하고, 현재 주소에 관련된 정보를 props로 쉽게 조회하거나 사용할 수 있도록 해줍니다. 1. Route 컴포넌트로 특정 주소에 컴포넌트 연결 Route라는 컴포넌트를 사.. 2020. 5. 20. [React] 컴포넌트 성능 최적화 컴포넌트 성능 최적화 추가되어 있는 데이터가 무수히 많아지면, 애플리케이션이 느려집니다. 이러한 현상으로 렌더링 최적화를 하여 성능을 높여봅시다. 많은 데이터 렌더링하기 크롬 개발자 도구를 통한 성능 모니터링 React.memo를 통한 컴포넌트 리렌더링 성능 최적화 onToggle과 onRemove가 새로워지는 현상 방지하기 react-virtualized를 사용한 렌더링 최적화 많은 데이터 렌더링 성능 분석 결과에 나타난 Timings에 작업이 처리되는 데 1.02초가 걸렸습니다. 데이터가 많으면 많을수록 시간이 오래걸려 성능이 매우 나쁘다고 판단됩니다. 느려지는 성능 원인 분석 자신이 전달받은 props가 변경될 때 자신의 state가 바뀔 때 부모 컴포넌트가 리렌더링될 때 forceUpdate 함수.. 2020. 5. 19. 이전 1 다음
