React : 18버전 이후 기능들 (automatic batching, useTransition, isPending, useDeferredValue)

18버전 이후로 리액트에서 성능을 향상시킬 수 있는 기능들이 생겼다.

---

automatic batching

batching 기능은 state변경함수들이 여러개 연달아 있는 경우 마지막에서만 한번 재렌더링이 일어나는 기능이다.

17버전까지

ajax나 setTimeout 등 늦게 동작하는 코드들 내부에서는 batching이 일어나지 않아 매번 재렌더링되었다.

18버전 이후

위의 경우에도 모두 batching이 일어난다.

---

useTransition

아래 코드처럼 데이터가 10000개 들어있는 array자료가 있고.. 그 개수만큼 div가 있고.. input에 타이핑 할 때마다 div들에 데이터가 업데이트된다면 지연시간이 왕창 발생할 것이다.

전

import {useState} from 'react'

let a = new Array(10000).fill(0) // 10000개 데이터가 든 array

function App(){
  let [name, setName] = useState('')
  
  return (
    <div>
      <input onChange={ (e)=>{ setName(e.target.value) }}/> <!-- input 칠 때마다.. -->
      {
        a.map(()=>{
          return <div>{name}</div> <!-- 10000개의 div가 업데이트?! -->
        })
      }
    </div>
  )
}

후

상단에 import해온 후 useTransition()을 쓰면  그 자리에 [변수, 함수]가 남는다. startTransition()함수로 state변경함수를 묶으면 그걸 다른 코드보다 나중에 처리해준다.

import {useState, useTransition} from 'react' // 상단에 import

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

function App(){
  let [name, setName] = useState('')
  let [isPending, startTransition] = useTransition() // 이거 작성
  
  return (
    <div>
      <input onChange={ (e)=>{ 
        startTransition(()=>{ <!-- startTransition으로 state변경함수 묶기 -->
          setName(e.target.value) 
        })
      }}/>

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

---

isPending

isPending은 startTransition()으로 감싼 코드가 처리중일 때 true로 변하는 변수이다. 그래서 아래처럼도 가능하다.

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

---

useDeferredValue

startTransition()과 용도가 똑같지만 useDeferredValue는 state나 변수를 넣을 수 있게 되어있다. 해당 변수에 변동사항이 생기면 그 변동사항을 늦게 처리해준다.

상단에 import해온 후 useDeferredValue()안에 state를 집어넣는다. 그 처리결과는 let state1안에 저장해준다.

import {useState, useTransition, useDeferredValue} from 'react' // 상단에 import

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

function App(){
  let [name, setName] = useState('')
  let state1 = useDeferredValue(name) // ()안에 state 넣어주고 let 변수에 작성
  
  return (
    <div>
      <input onChange={ (e)=>{ 
          setName(e.target.value) 
      }}/>

      {
        a.map(()=>{
          return <div>{state1}</div> <!-- 처리결과 -->
        })
      }
    </div>
  )
}

---

출처 : 코딩애플 https://codingapple.com/