[React]리액트 프로젝트 성능 잡기

[React]리액트 프로젝트 성능 잡기

1.함수와 변수 선언해서 사용

이벤트에 함수를 넣을 경우, 혹은 스타일을 넣을 경우 html에 직접 넣지 않고 함수와 변수를 선언해서 사용하는 것이 좋다. 메모리 할당을 줄여준다.

2.애니메이션은 transform 사용

애니메이션을 넣을 때 margin, width, padding과 같이 레이아웃을 잡는 속성들을 변경하면 렌더링 시간이 오래 걸리기 때문에 transform을 사용하여 애니메이션을 넣는 것이 좋다. 이는 리액트에서만 해당되는 것이 아니다.

3.Lazy Loading

파일 상단에 컴포넌트를 import 할 때 미리 한번에 로드하면 부담이 될 수 있다. 이럴 때 사용하는 것이 레이지 로딩이다. 당장 사용하지 않는 컴포넌트를 레이지 로딩하는 것으로 부담을 줄일 수 있다.

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

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

...


          <Suspense fallback={<div>로딩중이에요</div>}>
            <Detail shoes={shoes} 재고={재고} 재고변경={재고변경}/>
          </Suspense>


...

4.리액트 개발자 도구

구글의 확장 프로그램인 리액트 개발자 도구(React Dev Tool)를 설치하면 개발자 도구에서 Components 탭과 Profiler 탭이 생성된다.

Components 탭에서는 컴포넌트 구조는 물론 전달 받은 props, state 등을 확인 할 수 있다.

Profiler 탭에서는 파란색 동그라미 버튼을 클릭 후 페이지를 이동하고 빨간색 동그라미를 클릭하면 컴포넌트들의 로딩 혹은 재렌더링된 컴포넌트를 표시해준다.

5.불필요한 재런더링 막기

리액트에서의 재렌더링

리액트에서는 컴포넌트에 있는 props나 state가 변경되면 해당 html을 전체적으로 제랜더링한다. 그렇기 때문에 일부만 변경하더라도 전체적으로 재런더링하기 때문에 비효율적이다.

import React, { useEffect } from 'react';

const Component = () => {

    return (
        <div>
           <Parent 이름="최다혜" 나이="30"></Parent>
        </div>
    );
};

function Parent(props){
    return (
        <div>
            <Child1 이름={props.이름}></Child1>
            <Child2 나이={props.나이}></Child2>
        </div>
    )
}

function Child1(){
    useEffect(()=>{ console.log('렌더링됨 1')});
    return <div>첫번째 자식</div>
}

function Child2(){
    useEffect(()=>{ console.log('렌더링됨 2')});
    return <div>두번째 자식</div>
}

위 코드에서 일부 변경하고 파일을 저장하면 콘솔창에 두 가지 컴포넌트 모두 재렌더링 되는 것을 확인할 수 있다.

<Parent 이름="다혜최" 나이="30"></Parent>

memo()

이러한 불필요한 재렌더링을 막는 방법으로 memo() 함수 사용한다. memo() 함수는 props를 기억해주는 기능으로 컴포넌트를 감싸면 해당 컴포넌트의 props를 기억하여 props가 변경되었을 때만 재랜더링 한다.

memo() 함수 사용법

memo() 단점

기존의 props와 변경된 props를 비교 연산하기 때문에 props가 많아지면 사이트 속도가 느려질 수 있다. 그렇기 때문에 컴포넌트의 크기가 클 때만 사용하는 것이 좋다.