210718 성능잡기

함수나 오브젝트는 변수에 담아 쓰는 것이 좋다

var style = { color: red }
..
<tr style={ style }></tr>

이런식으로 인라인 css를 넣어준다.

컴포넌트가 재렌더링될 때, 변수에 저장되지 않은 자료형들은 매번 새로운 메모리 영역을 할당해주어야 하기 때문에 브라우저에 부담이 된다.

애니메이션: transform

margin, width, padding.. 이런 레이아웃과 관련된 속성에다가 자바스크립트나 transition을 이용해서 애니메이션을 넣는 것은 브라우저 입장에서 큰 부담이된다. transform, opacity 같은 css 속성을 이용해서 애니메이션을 구현하자!

왜? css 렌더링과 관련이 있음.
생성된 DOM 노드의 레이아웃(너비, 높이 등) 변경 시에는 영향받는 모든 노드(자식, 부모)의 수치를 다시 계산하여 렌더 트리를 재생성하기 때문이다.

컴포넌트 import

자바스크립트는 맨 위에서 한 줄 한 줄 읽어오기 때문에 컴포넌트파일이 여러개라면 브라우저에 적잖은 부담으로 작용한다.
(App.js 상단)

lazy loading을 이용하자!
=> Detail/Cart 컴포넌트가 필요할 때 로드해주세요~ 라는 말

1. 우선 react 라이브러리에서 lazy, Suspense를 import해와야 한다.

import React, { useState, useContext, lazy, Suspense } from 'react';

2. import Detail from './Detail.js'를 변경한다.

let Detail = lazy(()=>{ return import('./Detail.js') })

3. Detail 컴포넌트를 <Suspense> 태그로 감싼다.

<Suspense fallback={`<div> 로딩중이에요 </div>`}>

(로딩중일 때 띄우는 div)
끝!

React Dev Tools

구글에 react dev tools 라고 검색하면 바로 뜬다.
(크롬 확장 프로그램)
현재 페이지에 사용된 컴포넌트들과 props, state, hook을 모두 보여준다. 아주 유용한 프로그램이니 꼭 설치할 것.