[코딩애플] 쇼핑몰 프로젝트 Part10 - 성능개선 2: memo, useMemo, useTransition, useDeferredValue

✏️ memo()로 컴포넌트 불필요한 재렌더링 막기
- memo() 쓰려면 'react' 라이브러리로부터 import 해오면 된다.

import {memo, useState} from 'react'  // memo를 import

let Child = memo( function(){  // 원하는 컴포넌트 정의 부분 감싸기
  console.log('재렌더링됨')
  return <div>자식임</div>
})

function Cart(){ 

  let [count, setCount] = useState(0)

  return (
    <Child />
    <button onClick={()=>{ setCount(count+1) }}> + </button>
  )
}

- 컴포넌트를 let 컴포넌트명 = function( ){ } 이런 식으로 만들어야 감쌀 수 있다.
- 그럼 이제 Child로 전송되는 props가 변하거나 그런 경우에만 재렌더링 된다.

Q) 그럼 memo는 막 써도 되는건가?
- memo로 감싼 컴포넌트는 헛된 재렌더링을 안시키려고 기존 props와 바뀐 props를 비교하는 연산이 추가로 진행된다.
- props가 크고 복잡하면 이거 자체로 부담이 될 수도 있기 때문에 꼭 필요한 곳에만 사용하는 것이 좋다.

✏️ 비슷하게 생긴 useMemo
- useEffect와 비슷한 용도, 컴포넌트 로드시 1회만 실행하고 싶은 코드가 있으면 거기 담으면 된다.

import {useMemo, useState} from 'react'

function 함수(){
  return 반복문10억번돌린결과
}

function Cart(){ 

  let result = useMemo(()=>{ return 함수() }, [])

  return (
    <Child />
    <button onClick={()=>{ setCount(count+1) }}> + </button>
  )
}

- 예를 들어 반복문을 10억번 돌려야하는 경우
- 그 함수를 useMemo 안에 넣어두면 컴포넌트 로드시 1회만 실행된다. 
- dependency도 넣을 수 있어서 특정 state, props가 변할 때만 실행할 수도 있다. 

 

✏️ 일관된 batching & useTransition

✏️ 리액트 18버전부터 추가된 기능 1: 일관된 batching
- automatic batching 이라는 기능이 있는데 일종의 쓸데없는 재렌더링 방지기능이고 batching이라고 한다.

fetch().then(() => {
    setCount(1)   //재렌더링됨
    setName(2)   //재렌더링됨
})

- 근데 문제는 ajax 요청, setTimeout 안에 state 변경 함수가 있는 경우 batching이 일어나지 않는다.
- 리액트 17버전까진 그런 식으로 일관적이지 않게 동작했는데 18버전 이후부터는 어디 있든 재렌더링은 마지막 1번만 된다.
- batching 되는게 싫고 state 변경 함수 실행마다 재렌더링시키고 싶으면 flushSync라는 함수 사용하면 됨.

✏️ 리액트 18버전부터 추가된 기능 2 : useTransition 추가됨
- 렌더링시간이 매우 오래걸리는 컴포넌트가 있다 치고 
- 버튼 클릭, 타이핑할 때마다 그 컴포넌트를 렌더링해야한다면 버튼 클릭, 타이핑 반응속도도 느려진다.
- 이럴 때 사용하는 것이 useTransition 기능이다.

import {useState, useTransition} from 'react'

let a = new Array(10000).fill(0)

function App(){
  let [name, setName] = useState('')
  let [isPending, startTransition] = useTransition()
  
  return (
    <div>
      <input onChange={ (e)=>{ 
        startTransition(()=>{
          setName(e.target.value) 
        })
      }}/>

      {
        a.map(()=>{
          return <div>{name}</div>
        })
      }
    </div>
  )
}

- useTransition() 쓰면 그 자리에 [변수, 함수]가 남는다.
- 그 중 우측에 있는 startTransition() 함수로 state변경함수 같은걸 묶으면 그걸 다른 코드들보다 나중에 처리해준다.(특정 코드의 실행시점을 뒤로 옮겨주는 것)
- 그래서 <input> 타이핑 같이 즉각 반응해야하는 걸 우선적으로 처리해줄 수 있다. 
- 물론 근본적인 성능개선은 아니기 때문에 html이 많으면 여러 페이지로 쪼개는 것이 좋다.

💁‍♀️ isPending은 어디다 쓰냐면 
- startTransition() 으로 감싼 코드가 처리중일 때 true로 변하는 변수

{
  isPending ? "로딩중기다리셈" :
  a.map(()=>{
    return <div>{name}</div>
  })
}

 

 

✏️ useDeferredValue

- startTransition() 이거랑 용도가 똑같은데 state 아니면 변수 하나를 집어넣을 수 있게 되어 있다.
- 그래서 그 변수에 변동사항이 생기면 그걸 늦게 처리해준다.

import {useState, useTransition, useDeferredValue} from 'react'

let a = new Array(10000).fill(0)

function App(){
  let [name, setName] = useState('')
  let state1 = useDeferredValue(name)
  
  return (
    <div>
      <input onChange={ (e)=>{ 
          setName(e.target.value) 
      }}/>

      {
        a.map(()=>{
          return <div>{state1}</div>
        })
      }
    </div>
  )
}

- useDeferredValue 안에 state를 집어넣으면 그 state가 변동사항이 생겼을 때 나중에 처리해주고
- 처리 결과는 let state에 저장해준다.

 

---

본 포스팅은 << React 리액트 기초부터 쇼핑몰 프로젝트까지! >> 강의를 참고합니다.