[발표] useTransition과 useDeferredValue

useTransition란

복잡하거나 오래 걸리는 작업을 하는 동안 웹사이트가 부드럽게 작동할 수 있도록 돕는 도구로

비동기 작업을 효율적으로 관리한다.

 

useTransition 사용 방법

1. 기본 사용법

• isPending : 현재 어떤 작업이 진행 중인지를 나타내는 값. 작업이 진행중이면 'true', 아니면 'false;.
• startTransition :  비동기 작업을 시작하는 함수. 이 함수 안에서 오래 걸리는 작업을 수행하면 된다.

import React, { useState, useTransition } from 'react';

function ExampleComponent() {
  const [isPending, startTransition] = useTransition();
  const [data, setData] = useState([]);

  const fetchData = () => {
    startTransition(() => {
      // 오래 걸리는 작업 (예: API 호출)
      const newData = fetchFromAPI();
      setData(newData);
    });
  };

  return (
    <div>
      <button onClick={fetchData}>Load Data</button>
      {isPending ? <p>Loading...</p> : <DataDisplay data={data} />}
    </div>
  );
}

 

startTransition 안에 있는 작업은 비동기로 처리되고, 이 동안 isPending 이 true로 설정돼서 Loading... 메세지를 보여준다.

 

React의 동작 원리

리액트는 모든 상태 변경이 동일한 우선순위를 가지지 않는다.

사용자가 입력 필드를 수정하는 것을 고우선순위로, 대량의 데이터를 로드하는 작업은 저순위 작업으로 간주될 수 있다.

이때 useTransition을 사용하면 이 우선순위를 조정할 수 있어서 비동기 작업이 진행되는 동안 고우선순위 작업은 여전히 즉각적으로 처리될 수 있다.

 

useDeferredValue란

값의 변경을 지연시켜서 웹사이트가 큰 작업을 처리할 때 화면이 버벅거리지 않게 해준다.

예를 들어, 사용자가 검색어를 입력할 때 검색어가 바뀔 때마다 검색 결과를 즉시 업데이트하면 웹사이트가 느려질 수 있다. 이때 useDeferredValue를 사용하면 검색어가 바뀌는 동안 결과 업데이트를 지연시켜 부드럽게 작동하게 해준다.

 

import React, { useState, useDeferredValue } from 'react';

function SlowComponent({ text }) {
  // 이 컴포넌트는 입력된 텍스트를 복잡하게 처리한다고 가정하자.
  // 실제로는 그냥 대문자로 바꾸는 단순한 작업을 해.
  const processedText = text.toUpperCase();
  return <div>Processed Text: {processedText}</div>;
}

function App() {
  const [input, setInput] = useState('');
  const deferredInput = useDeferredValue(input); // 입력값을 미뤄서 저장해.

  return (
    <div>
      <h1>useDeferredValue 예제</h1>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)} // 입력값이 변경되면 상태를 업데이트.
        placeholder="여기에 입력하세요"
      />
      <div>즉각 반응: {input}</div> {/* 즉각적으로 입력된 텍스트를 보여줘. */}
      <SlowComponent text={deferredInput} /> {/* 조금 느리게 반응하는 컴포넌트. */}
    </div>
  );
}

export default App;

 

위 예제를 보면 

1. 입력 컴포넌트 : <input> 태그로 사용자가 텍스트를 입력할 수 이다. 이때 입력값은 input이라는 상태로 관리된다.

2. useDeferredValue : 입력된 값을 deferredInput 이라는 변수에 잠시 미뤄서 저장한다. 이 값은 input과 달리 조금 느리게 업데이트 된다.

3. 즉각 반응하는 컴포넌트 : <div>즉각반응 : {input} </div> 는 사용자가 입력한 텍스트를 바로 바로 보여준다.

4. 느린 컴포넌트 : SlowComponent는 입력된 텍스트를 대문자로 바꿔서 보여준다. 이 컴포넌트는 useDeferredValue로 받은 값을 사용하니까 입력이 조금 늦게 반영된다.

 

예제 결과

1. 즉각 반응 : 입력창에 텍스트를 입력하면, 바로 그 텍스트가 "즉각 반응" 부분에 표시된다.

2. 느린 반응 : 입력된 텍스트는 대문자로 바뀌어서 "Processed Text"로 표시되는데, 이 부분은 입력이 완료된 후에 조금 늦게 반응하게 된다. 이게 바로 useDeferredValue를 사용한 결과이다.

 

이렇게 하면 useDeferredValue를 사용하면 사용자가 입력하는 동안 중요한 부분은 빠르게 처리하고, 시간이 걸리는 작업은 조금 미뤄서 처리할 수 있다.