lazy loading? React dev tools?

Steve·2021년 6월 17일

기능 구현 후 리팩토링으로 성능향상과 유지관리를 해야할것이다.

익명함수/ 익명object 안쓰기 (왜안쓰나?)

레이아웃에 에니메이션 주지말기

컴포넌트에 lazy loading하기
추가로 React Dev Tools 크롬 확장프로그램 설치해서 이거저거 알아보겠습니다.

1. 함수나 오브젝트는 변수에 담아 쓰는게 좋다

그냥 메모리 누수를 방지하는 JS코딩 관습.
안 그러면 재랜더링 할 때마다 메모리에 할당됨.

function Cart(){
  return (
    <div style={ {color : 'red'} } ></div>
  )
}

위 코드처럼 그냥 넣지 말고

let 스타일 = {color : 'red'};
function Cart(){
  return (
    <div style={ 스타일 } ></div>
  )
}

▲ 이렇게 컴포넌트 바깥에 변수로 저장해서 쓴다면 메모리 누수를 방지할수있습니다.
왜냐하면 컴포넌트가 재렌더링 될때 변수에 저장되지 않은 익명object,function들은 매번 새로운 메모리영역을 할당해줘야하기 때문에 컴퓨터의 성능이 떨어질 수 있습니다.

2. 에니메이션 줄 때 레이아웃 변경 에니메이션은 안좋다.

css코딩 팁

레이아웃이라 함은, width margin padding left right top bottom 등을 말하는데 js나 transition을 이용해 레이아웃 변경은 브라우저에게 부담임.
애니메이션 넣어도 성능에 지장없게 만들고 싶으면
transform, opacity를 이용 권장.
transform으로 scale(크기변경),translate(좌표이동),rotate(회전) 등

3. 컴포넌트 import 할 대 lazy 하게 import 하는법

App.js 에는 import가 상당히 많습니다.
App.js라는 메인페이지 방문시 Detail, Cart 등을 모두 import해옵니다.
그래서 많은 컴포넌트들을 import 해오라고 써놓으면 초기 접속속도가 굉장히 느려질수가 있는데 이를 방지하기 위해 나온것이 lazy()

(App.js 상단)

import React, {useState, useContext} from 'react';
import Detail from './Detail.js';
import Cart from './Cart.js'

▲Detail,Cart같은 컴포넌트들이 필요해질때 import한다면 더 효율적일것이다.
아래처럼 말이다.

(App.js 상단)

import React, {useState, useContext, lazy, Suspense} from 'react';//lazy, Suspense import
let Detail = lazy( () => import('./Detail.js') );

(App.js 중단에 Detail 컴포넌트 쓰는 곳)
render (
  <Suspense fallback={ <div>로딩중입니다~!</div> }> // 컴포넌트 로딩전까지 띄어줄 원하는 HTML 작성!
    <Detail/>
  </Suspense>
)