/ REACT

useTransition에 대해서

React은 다음과 같이 구성되어 있습니다.




React 18버전 부터 추가된 useTransition에 대해서 알아보겠습니다.

useTransition

만약에 렌더링되는데 오래걸리는 컴포넌트가 있고, 버튼을 클릭할 경우 이 컴포넌트가 렌더링이 될 때, 컴포넌트의 렌더링속도가 오래걸리기 때문에 버벅일 수 있습니다.

import { useState } from 'react';

let arr = new Array(10000).fill(0);

function App() {
  const [input, setInput] = useState('');

  return (
    <div>
      <input onChange={e => setInput(e.target.value) } />
      {arr.map(() => {
        return <div>{input}</div>
      })}
    </div>
  )
}

arr라는 변수에 0으로 가득찬 10000개의 공간을 가진 Array를 저장하여 이를 이용해서 map()으로 input창에 입력한 값인 input을 출력하고 있습니다. input창에 타이핑할때마다 만개의 input값이 출력되므로 버벅이게 될 것입니다. 물론 이러한 예시처럼 코드를 짜는 것 자체가 바람직하지 않지만 불가피하다면 useTransition을 사용할 수 있습니다.

import { useState, useTransition } from 'react';

let arr = new Array(10000).fill(0);

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

위와 같이 useTransition을 import하고,
‘const [isPending, startTransition] = useTransition();’ 을 해준 후, 성능저하를 일으키는 setInput()을 startTransition으로 감싸주게되면 setInput(e.target.value)를 다른 코드보다 늦게 처리시켜줍니다. input창에 입력하는 것과 같이 즉각적으로 반응해야하는 일을 우선적으로 처리한 후, setInput()을 늦게 처리해주어 성능을 높여줍니다. 실제로 input창에 입력해보면 이전 코드보다 속도가 향상된 것을 느낄 수 있습니다.



그리고 isPending은 startTransiton으로 감싼 코드가 아직 처리중일 경우, true를 반환하는 함수입니다. 이를 이용해서 isPending이 true일 경우 Loading메시지와 같은 것을 보여주는 등의 코드를 작성할 수 있습니다.




End.