React. 성능개선
⊙ 함수, 객체 관리
-
익명 함수 선언 지양
-
함수나 오브젝트는 변수선언해서 사용한다.
style={ { color : 'red' } }
→ let red = { color : 'red' } / style={red}
onClikc={()=>{}}
→ function 선언 후 삽입- 메모리 할당 관련 성능 이점
⊙ 애니매이션
-
애니메이션은 브라이저 렌더링 과정에 프레임 저하를 일으킬수 있기때문에 지양한다.
-
되도록 transform CSS속성을 사용한다.
⊙ lazy loading
-
컴포넌트 import는 정의되어 있는 순차적으로 전부 실행된다.
-
따라서 모든 컴포넌트를 미리 로드하여 자원 부담이 생길 수 있다.
-
React.lazy 함수를 사용하면 동적 import를 사용해서 컴포넌트를 렌더링 할 수 있다.
import React, { lazy } from 'react';
// import Detail from '/detail.js';
let Detail = lazy(()=>{ return import('./Detail.js')});
<Suspense fallback={<div>loding...</div>}>
<Detail/>
</Suspense>⊙ memo
-
컴포넌트에 있는 props나 state가 변경되면 그안에 있는 HTML은 전부 재렌더링 된다.
-
즉 M이라는 컴포넌트안에 A와B라는 두개의 컴포넌트를 포함하고 있을때 A에만 쓰이는 props를 M에서 변경 했을때 A와B가 둘다 재렌더링 된다.
-
memo라는 기능을 사용하면 이를 개선할 수 있다.
import React, { memo } from 'react';
let Child = memo(function(){
});-
memo로 감싼 컴포넌트는 직접적으로 관련된 props를 변경하지 않으면 재렌더링이 되지 않는다.
-
하지만 결국 검증에 필요한 자원도 발생되기 때문에 컴포넌트의 크기가 클때 사용 권장한다.
