REACT- 성능개선1, lazy loading 성능개선을 위해 해야할 것을 알아보자.

개발을 하면서 성능개선 힘쓰기에 돌입해보자. 

 

우선 함수나 오브젝트일 경우에는 변수에 담아 쓰는 것이 좋습니다.

이름지어서 사용하는 경우가 좋은 이유는 메모리할당 때문인데, 

 

콜백함수, 오브젝트형식들을 쓰면

사이트 재랜더링, 버튼 누를 때 함수로 쓰면

메모리할당이되어야하는데 성능적으로 문제가 있을 수 있기 때문,

 

또한  상황에 따라서 애니메이션을 줄 때 

사이트에 레이아웃을 변경하거나 margin , width, padding(레이아웃 잡는 속성들)을 변경시키는데, 브라우저가 랜더링을 힘들어한다.(React뿐만 아니라 css자체의 기본 상식)

 

따라서 애니메이션을 줄 때 transform 속성을 되도록이면 사용하는 것이 좋다.

 

또한 App.js에 컴포넌트들을 import할 때 자바스크립트는 위에서부터 한줄씩 읽어내기 때문에,

Cart.js, Detail.js 다 미리 로드가 되기 때문에 힘들어질 수 있다.

따러서 컴포넌를 import할 때 lazy loading란 것을 사용해보자. 

 

그전에 lazy loading이 무엇이냐함은, 

 

다 미리 랜더링하여 필요없는 것까지 불러들이는 거이아닌 꼭 필요한 것만 import할 수 있도록 해주는 것을 말한다.

예를들어, Detail.js 가 지금 필요치 않을 때 , 꼭 필요한 시점에 import해줘!할 수 있는 것인데, 사용법을 보면서 이해를 해보자구.

 

| lazy loading 사용

 

1. lazy, Suspense를 import하기

 

App.js

import './App.css';

import {useState, lazy, Suspense} from 'react';
// import Detail from './routes/Detail';

import Detail from './routes/Detail'; 👉 잠깐 주석처리한 후

//사이트를 발행할 때도 별도의 js파일로 분리됨
const Detail = lazy( () => import('./routes/Detail.js') )

 

컴포넌트를 이렇게 import하면

App.js를 방문할 때 먼저 로딩하는 것이아니라 Detail.js가 필요할 때만 로딩되게된다. 천천히 로딩되게해주는 것.

Detail.js가 필요한 순간에 말이다.

 

 

2. 대부분 Suspense와 같이 씀, Suspense로 Detail 컴포넌트 감싸주기

          <Route path="/detail/:id" element={
            <Suspense fallback={<div>로딩중임</div>}>
              <Context1.Provider value={{stuff, shoes}}>
                <Detail shoes={shoes} /> 
              </Context1.Provider>
            </Suspense>
            } />
            
            
            -- 밑 코드 생략 --

 

 

<Suspense fallback={<div>로딩중임</div>}>

Detail 로 방문을 하면 로딩이 될텐데 그 때 인터넷환경이 느릴 경우 임시 메세지로 

로딩전에 보영줄 html도 만들 수 있다. 

 

근데 실행해보니 에러가 난다구?

 

이 lazy loading을 사용할 때 주의할 점은

const Detail = lazy(() => {return import('./routes/Detail.js')});

return 을 꼭 넣어줘야한 다는 것!😤

 

| React devtools 설치 

그럼 이 lazy 로딩이 잘 되어졌는지 확인하기 위해 React devtools 설치해보자

페이스북이 공식적으로 만든 확장기능이다.

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

설치하면 개발자도구로 미리보기 가능하다.

components 탭을 누르면 컴포넌트 검사가 가능하다.

전달받은 props들도 확인가능, state들도 표기되어서확인할 수도 있고.

바로바로 수정도 할 수 있다.

 

다시 돌아가서 lazy loading이 잘 되어지나 확인하려면 타이머 아이콘을 누르면 된다.

<Suspense fallback={<div>로딩중임</div>}> 이라고 해놨으니 타이머를 클릭할 때 화면에 로딩중임이 나오면

잘 적용된 것을 알 수 있다. 

 

 

컴포넌트 렌더링 속도와 단계녹화 

녹화해주는 profiler

사이트 컴포넌트들이 많은데 컴포넌트들의 랜더링, 로딩시간들을 측정해준다.

어느페이지에서 어느페이지로 넘어갔는지에 대해 렌더링된 컴포넌트들을 다 표시해주기 때문에

어떤 컴포넌트가 렌더링이 오래걸리나에대해 확인할 수 있다.