231221_TIL : 리액트 성능 향상 - batching, useTransition, useDeferredValue

1. Batching

리액트에서는 상태변화함수가 연달아 여러번 실행될 때, 렌더링은 마지막 한번만 일어나는 batching이라는 기능이 있다.

이 batching은 여러번 렌더링 하던것을 한번만 하게되므로 성능을 향상시키는 것인데,

기존 리액트 17에는 setTimeout이나 비동기작업에서는 이 부분이 적용되지 않았지만, 리액트 18버전부터는 위와같은 작업에서도 batching이 적용되었다.

 

 

2. useTransition

처리가 오래걸리는 작업에서 우선순위를 지정해 늦게 처리해도 되는 부분을 나중에 처리하도록 지정하는 훅이다.

function App() {
  const [name, setName] = useState('');
  const [ispending, startTransition] = useTransition();
  
  return (
    <div>
      <input onChange={ (e)=>{
        startTransition(()=>{ setName(e.target.value) })
        }} />
        
      { a.map(()=>{
          return <div>{name}</div>
        })
      }
    </div>
  )
}

 

여기서는 input 창의 타이핑 작업을 먼저 처리하고, 위와같이 startTransition함수로 감싼 작업은 늦게 처리 해준다. 

이렇게 하면 타이핑 시 버벅거리는 현상을 해결할 수 있다.

 

ispending은 startTransition 함수가 수행 중일때 true 상태가 되는 boolean 값인데,

ispending을 이용하여 처리중일 때 로딩페이지를 출력하도록 조건부렌더링을 할 수 있다.

 

 

3. useDeferredValue

이것도 useTransition과 마찬가지로 우선순위를 정해 나중에 처리하도록 해주는 훅인데, useTransition은 함수처리를 지연시켜주는 것이면, useDeferredValue는 지정한 상태값에 변화가 생겼을 때 늦게 처리해준다는 것이다.

 

코드를 보면 아래와 같이 사용할 수 있다.

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

 

useDeferredValue로 지정한 상태값을 하나의 변수로 지정하는데 이때, name값이 늦게 바뀌는 것이 아니라 state1의 값이 늦게 바뀐다.

콘솔에 찍어 확인해보면 name의 값은 바로 변경되는 반면, state1의 값은 늦게 변경되는 것을 확인할 수 있다.