👍 성능개선3

✔️ useTransition

렌더링시간이 매우 오래걸리는 컴포넌트가 있다고 가정합니다.
버튼클릭, 타이핑할 때 마다 그 컴포넌트를 렌더링해야한다면 이상하게 버튼클릭, 타이핑 반응속도도 느려집니다.
이를 해결 하기 위해서는 해당 컴포넌트 안의 html 갯수를 줄이면 대부분 해결됩니다. 하지만 html의 갯수를 줄이지 못할때는 useTransition을 사용합니다.

동작원리

useTransition() 쓰면 그 자리에 [변수, 함수]가 남습니다.
그 중 우측에 있는 startTransition() 함수로 state변경함수 같은걸 묶으면 다른 코드들보다 나중에 처리해줍니다.

특정 코드의 실행시점을 뒤로 옮겨서 성능을 향상시키는 방법이기 때문에 html이 많다면 여러페이지로 나누는 방법이 좋습니다.

import {useState, useTransition} from 'react' // 1. useTransition을 import하기

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

function App(){
  let [name, setName] = useState('')
  let [isPending, startTransition] = useTransition() // 2. useTransition 변수 만들기
  
  return (
    <div>
      <input onChange={ (e)=>{ 
        startTransition(()=>{ 3. 성능저하를 발생하는 코드 감싸기
          setName(e.target.value) 
        })
      }}/>

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

isPending 예시

startTransition() 으로 감싼 코드가 처리중일 때 true로 변하는 변수입니다.

해당 state 변경이 실행되기전에 로딩중임을 알릴 때 유용합니다.

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

✔️ useDeferredValue

startTransition() 용도는 똑같지만 state 아니면 변수를 한개만 집어넣을 수 있게 되어있습니다.

그래서 그 변수에 변동사항이 생기면 그걸 늦게 처리해줍니다.
useDeferredValue 안에 state를 집어넣으면 그 state가 변동사항이 생겼을 때 나중에 처리해줍니다.

그리고 처리결과는 let state에 저장해줍니다.

import {useState, useTransition, useDeferredValue} from 'react' // 1. import하기

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

function App(){
  let [name, setName] = useState('')
  let state1 = useDeferredValue(name) // 2. useDeferrendValue함수에 처리가 늦는 변수를 넣어 새로운 변수로 만들기
  
  return (
    <div>
      <input onChange={ (e)=>{ 
          setName(e.target.value) 
      }}/>

      {
        a.map(()=>{
          return <div>{state1}</div> // 3. 변수 재사용하기
        })
      }
    </div>
  )
}