[React] 성능개선하기

 

---

 

 

 

◽ lazy import

함수형으로 사용한다.

// before
import Detail from './routes/Detail.js'

// after
import {lazy, Suspense, useEffect, useState} from 'react'
const Detail = lazy( () => import('./routes/Detail.js') )

 

이때 함수형으로 선언한 컴포넌트에 지연이 발생할 수 있는데, <Suspense>로 감싸주면 로딩도 구현할 수 있다.

필요하다면 <Routes> 자체를 감싸도 된다.

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

 

 

---

 

 

◽ memo

컴포넌트가 재랜더링이 되면 안에있는 자식컴포넌트도 함께 재렌더링되어 성능이 저하될 수 있다.

그래서 꼭 필요한 경우, 특정 상황에만 재렌더링 될 수 있도록 하는 것이 memo()이며 props가 변할 때만 재렌더링한다.

import {memo} from "react";

// 기존의 함수를 memo로 감싸준다.
let child = memo(function() {
  return (
      <div>자식 컴포넌트입니다.</div>
  )
})

 

💡 Tip

1. 재렌더링이 오래 걸리는 컴포넌트에 사용하면 좋다.
2. memo()로 감싸면 항상 기존 props와 신규 props를 비교하기 때문에 복잡한 props를 사용하고있다면 오히려 성능이 더 떨어질 수 있다. 따라서 무거운 컴포넌트에만 사용하는 것이 좋다.

 

 

◽ useMemo

useMemo()로 감싼 함수의 경우, 컴포넌트 렌더링 시 1회만 실행된다.

useEffect()와 동일하다.

let result = testFunc() // 재렌더링 될 때 마다 함수가 실행된다.
useMemo(() => { return testFunc() }) // 컴포넌트 렌더링 시 1회만 실행된다.
useMemo(() => { return testFunc() }, [변수]) // 이렇게 state나 props 변수를 지정할 수도 있다.

 

 

 

---

 

 

◽ automatic batching 기능 (18버전 이후)

state 변경 함수를 연달아 사용하면 원래는 렌더링도 횟수만큼 되어야하지만 automatic batching으로 인해 1회만 실행된다.

단, ajax 요청이나 setTimeout 안에 state 변경함수가 있는 경우 batching이 일어나지 않는다.

 

◽ flushSync() 사용하기

만약 재렌더링이 state 함수가 실행될 때 마다 되어야하거나 또는 함수사이에 다른 동작이 필요하다면 flushSync라는 함수를 사용하면 된다. (async, await 같은 개념)

import { flushSync } from "react-dom";

const handleApp = () => {
    flushSync(() => {
      // ...
    });
};

 

 

 

---

 

◽ useTransition

특정코드의 실행시점을 뒤로 옮겨 가장 필요한 코드부터 먼저 실행될 수 있도록 한다.

import { useTransition } from 'react'

function App() {
  let [isPending, startTransition] = useTransition()

  return (
      <div>
        <input onChange={ (e)=> {
          // 이렇게 감싸주면 된다.
          // 아직 처리중일 때 isPending은 true가 되므로 로딩 처리에 필요하다.
          startTransition(()=>{
            testFunc(e.target.value)
          })
        }}/>
      </div>
    )
}

 

 

◽ useDeferredValue

useTransition()과 동일한 역할이나 변수를 넣을 수 있다.

// useDeferredValue() 안에 넣은 변수에 변동사항이 생기면 후에 처리한다.
let state = useDeferredValue(name)

 

 

---

 

 

 

출처

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌