[react] 성능 개선

리액트에서 코드를 다 짜고나서 배포를 하게되면 리액트 내에서의 코드들을 고유의 html,css,js파일로 변환시켜야 한다.

특히 리액트 사이트들은 리액트에서 만들고 사용한 컴포넌트들이 하나의 js파일에 모두 들어가기 때문에 처음 시작 페이지에서 로딩속도가 매우 느릴 수가 있다.

당장 첫 페이지 로드에 필요 없는 컴포넌트들을 첫 페이지가 load 되고 필요할때가 되서야 load 되게끔 해야 성능저하를 막을 수 있다.

개선 전

import TestComponent from './components/TestComponent.js';
function App() {
	return(
    	<div className='App'>
      		<Routes>
      			<Route path="/test" element={<TestComponent />} />
      		</Routes>
      	</div>
    )
}

개선 후

import { lazy, Suspense } from 'react';
const TestComponent = lazy( () => import('./components/TestComponent.js'))
function App() {
	return(
    	<div className='App'>
      		<Suspense fallback={<div>loading...</div>}>
              <Routes>
                 <Route path="/test" element={<TestComponent />} />
              </Routes>
			</Suspense>
      	</div>
    )
}

react에서 기본으로 제공되는 lazy함수와 Suspense컴포넌트를 import 해준다.

Suspense는 특정 컴포넌트에서만 지연 시키고 싶으면 특정 컴포넌트에 감싸주면 된다.

하지만 웬만하면 Route들 자체가 처음 로딩 되기 위해서 필요하지 않으므로 Routes전체를 감싸주었다.

그리고 lazy함수를 사용 했으므로 지연시간이 발생 한다.
Suspense의 fallback이라는 속성에 TestComponent가 로딩중일 때 보여줄 html코드나 컴포넌트를 작성할 수 있다.

스피너나 따로 css로 간단하게 loading중일 때의 ui를 만들어서 보여주기에도 좋을 것 같다.