React3 Next.js Next.js SSR을 쉽게 구현하도록 도와준다. Next.js는 React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 프레임워크이다. React도 SSR을 고려하여 설계되었기 때문에 자체적으로도 구현이 가능하지만, 개발환경을 만들기 위해서는 생각보다 복잡하여 해결하기 위해 Next가 나왔으며, 사용법도 간편하다. 웹사이트들은 대부분 SSR로 동작 되어 왔기 때문에, 페이지가 여러 개로 구성된 Multi Page Form 방식을 사용했었다. 하지만 스마트폰이 등장하면서 웹들은 모바일에 최적화가 되어있지 않았기 때문에 사용에 불편함이 커지게 되었고, 모바일 앱과 같은 형태의 웹앱이 필요하게 되었다. 이러한 문제를 해결하기 위해서 React, Vue, Angular 등.. 2022. 1. 10. [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 다음
