M

MLOG

한국어

React의 useTransition 훅을 사용하여 로딩 상태를 관리하고 UI 업데이트의 우선순위를 지정하여 UX를 개선하고 전 세계 사용자를 위해 더 부드럽고 반응성이 뛰어난 애플리케이션을 만드십시오.

React useTransition 훅: 동시 렌더링으로 사용자 경험 향상

끊임없이 진화하는 웹 개발 환경에서 매끄럽고 반응성이 뛰어난 사용자 경험을 만드는 것이 가장 중요합니다. 사용자 인터페이스 구축을 위한 선도적인 JavaScript 라이브러리인 React는 개발자가 이 목표를 달성할 수 있도록 지속적으로 기능을 도입합니다. 그중에서도 useTransition 훅은 로딩 상태를 관리하고 UI 업데이트의 우선순위를 지정하는 강력한 도구로서 두드러지며, 궁극적으로 전 세계 사용자를 위해 더 매끄럽고 즐거운 상호 작용을 제공합니다.

문제 이해: UI 업데이트 차단

useTransition에 대해 자세히 알아보기 전에 이 훅이 해결하는 문제를 이해하는 것이 중요합니다. 기존 React 렌더링에서는 업데이트가 동기식으로 이루어집니다. 즉, 컴포넌트의 상태가 변경되면 React는 즉시 렌더링 프로세스를 시작하여 메인 스레드를 차단하고 특히 복잡한 컴포넌트나 계산 집약적인 작업을 처리할 때 눈에 띄는 지연을 초래할 수 있습니다. 사용자는 다음을 경험할 수 있습니다.

이러한 문제는 인터넷 연결 속도가 느리거나 성능이 낮은 장치를 사용하는 사용자에게 특히 문제가 되어 전반적인 경험에 부정적인 영향을 미칩니다. 대역폭이 제한된 지역의 사용자가 데이터가 풍부한 애플리케이션을 사용하려고 시도하는 경우 동기식 업데이트로 인한 지연은 매우 실망스러울 수 있습니다.

useTransition 소개: 동시 렌더링을 위한 솔루션

React 18에 도입된 useTransition 훅은 동시 렌더링을 활성화하여 이러한 문제에 대한 솔루션을 제공합니다. 동시 렌더링을 통해 React는 렌더링 작업을 중단, 일시 중지, 재개 또는 포기할 수도 있으므로 특정 업데이트의 우선순위를 다른 업데이트보다 높게 지정할 수 있습니다. 즉, React는 백그라운드에서 장기 실행 작업을 수행하는 동안에도 UI를 응답성 있게 유지할 수 있습니다.

useTransition 작동 방식

useTransition 훅은 두 개의 값을 포함하는 배열을 반환합니다.

  1. isPending: 전환이 활성 상태인지 여부를 나타내는 부울입니다.
  2. startTransition: 전환으로 표시할 상태 업데이트를 래핑하는 함수입니다.

startTransition을 호출하면 React는 묶인 상태 업데이트를 긴급하지 않은 것으로 표시합니다. 이를 통해 React는 메인 스레드가 덜 바쁠 때까지 업데이트를 연기하여 사용자 상호 작용과 같은 더 긴급한 업데이트에 우선순위를 부여할 수 있습니다. 전환이 보류 중인 동안 isPending은 true가 되어 사용자에게 로딩 표시기 또는 기타 시각적 피드백을 표시할 수 있습니다.

실용적인 예: useTransition으로 사용자 경험 향상

React 애플리케이션에서 useTransition을 사용하여 사용자 경험을 개선할 수 있는 몇 가지 실용적인 예를 살펴보겠습니다.

예제 1: 검색 기능 최적화

사용자가 입력할 때 대규모 데이터 세트를 필터링하는 검색 기능이 있다고 가정합니다. useTransition이 없으면 각 키 입력이 다시 렌더링을 트리거하여 지연이 발생할 수 있습니다. useTransition을 사용하면 입력 필드 업데이트의 우선순위를 지정하면서 필터링 작업을 연기할 수 있습니다.


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

function SearchComponent({
  data //대규모 데이터 세트라고 가정
}) {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState(data); //초기 데이터 세트를 결과로 설정
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    const inputValue = e.target.value;
    setQuery(inputValue); // 입력 필드를 즉시 업데이트

    startTransition(() => {
      // 전환에서 데이터 필터링
      const filteredResults = data.filter((item) =>
        item.name.toLowerCase().includes(inputValue.toLowerCase())
      );
      setResults(filteredResults);
    });
  };

  return (
    <div>
      <input type="text" value={query} onChange={handleChange} placeholder="검색..." />
      {isPending && <p>검색 중...</p>}
      <ul>
        {results.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default SearchComponent;

이 예제에서 handleChange 함수는 query 상태를 즉시 업데이트하여 입력 필드가 응답성을 유지하도록 합니다. 계산 비용이 많이 들 수 있는 필터링 작업은 startTransition으로 래핑됩니다. 필터링이 진행 중인 동안 isPending 상태는 true가 되어 사용자에게 "검색 중..." 메시지를 표시할 수 있습니다. 이렇게 하면 시각적 피드백이 제공되고 사용자가 지연을 응답성 부족으로 인식하는 것을 방지할 수 있습니다.

예제 2: 탐색 전환 최적화

탐색 전환도 useTransition의 이점을 누릴 수 있습니다. 특히 복잡한 애플리케이션에서 경로 간에 탐색할 때 컴포넌트가 마운트되고 데이터를 가져오는 동안 지연이 발생할 수 있습니다. useTransition을 사용하면 새 페이지 콘텐츠 렌더링을 연기하면서 URL 업데이트의 우선순위를 지정할 수 있습니다.


import React, { useState, useTransition } from 'react';
import { useNavigate } from 'react-router-dom';

function NavigationComponent() {
  const navigate = useNavigate();
  const [isPending, startTransition] = useTransition();

  const handleNavigation = (route) => {
    startTransition(() => {
      navigate(route);
    });
  };

  return (
    <nav>
      <button onClick={() => handleNavigation('/home')}>홈</button>
      <button onClick={() => handleNavigation('/about')}>정보</button>
      <button onClick={() => handleNavigation('/products')}>제품</button>
      {isPending && <p>로딩 중...</p>}
    </nav>
  );
}

export default NavigationComponent;

이 예제에서 handleNavigation 함수는 startTransition을 사용하여 navigate 함수를 래핑합니다. 이는 React에게 URL 업데이트의 우선순위를 지정하여 탐색이 시작되었음을 사용자에게 즉시 피드백하도록 지시합니다. 새 페이지 콘텐츠 렌더링은 메인 스레드가 덜 바쁠 때까지 연기되어 더 부드러운 전환 경험을 보장합니다. 전환이 보류 중인 동안 사용자에게 "로딩 중..." 메시지를 표시할 수 있습니다.

예제 3: 더 많은 이미지 로드 기능이 있는 이미지 갤러리

"더 많은 이미지 로드" 버튼을 사용하여 이미지 배치를 로드하는 이미지 갤러리를 고려하십시오. 새 이미지 배치를 로드할 때 useTransition을 사용하여 이미지를 가져오고 렌더링하는 동안 UI를 응답성 있게 유지할 수 있습니다.


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

function ImageGallery() {
  const [images, setImages] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [isPending, startTransition] = useTransition();
  const [page, setPage] = useState(1);

  const loadMoreImages = useCallback(async () => {
      setIsLoading(true);
      startTransition(async () => {
        // API에서 이미지 가져오기 시뮬레이션 (실제 API 호출로 바꾸십시오)
        await new Promise(resolve => setTimeout(resolve, 500));

        const newImages = Array.from({ length: 10 }, (_, i) => ({
          id: images.length + i + 1,
          src: `https://via.placeholder.com/150/${Math.floor(Math.random() * 16777215).toString(16)}` // 임의의 자리 표시자 이미지
        }));

        setImages(prevImages => [...prevImages, ...newImages]);
        setPage(prevPage => prevPage + 1);

      });
      setIsLoading(false);
  }, [images.length]);

  return (
    <div>
      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
        {images.map(image => (
          <img key={image.id} src={image.src} alt={`Image ${image.id}`} style={{ margin: '5px' }} />
        ))}
      </div>
      {isLoading ? (
        <p>이미지 더 로드 중...</p>
      ) : (
        <button onClick={loadMoreImages} disabled={isPending}>
          {isPending ? '로드 중...' : '더 로드'}
        </button>
      )}
    </div>
  );
}

export default ImageGallery;

이 예에서 "더 로드" 버튼을 클릭하면 loadMoreImages 함수가 트리거됩니다. 이 함수 내에서 startTransition을 사용하여 새 이미지를 갤러리에 추가하는 상태 업데이트를 래핑합니다. 이미지가 로드 및 렌더링되는 동안 isPending이 true로 설정되고 버튼이 비활성화되어 여러 번 클릭하는 것을 방지하고 텍스트가 "로드 중..."으로 변경됩니다. 로딩이 완료되면 이미지가 렌더링되고 isPending이 false로 돌아갑니다. 이는 더 많은 이미지가 로드되고 있음을 시각적으로 나타내고 사용자가 버튼을 두 번 클릭하여 예기치 않은 동작이 발생할 수 있는 것을 방지합니다.

useTransition 사용을 위한 모범 사례

useTransition 훅을 효과적으로 활용하려면 다음 모범 사례를 고려하십시오.

글로벌 고려 사항: 다양한 청중을 위한 UX 맞춤화

전 세계 청중을 위해 웹 애플리케이션을 개발할 때는 다양한 지역 및 문화권의 사용자의 다양한 요구와 기대를 고려하는 것이 중요합니다. useTransition을 사용하고 사용자 경험을 최적화하기 위한 몇 가지 글로벌 고려 사항은 다음과 같습니다.

useTransition을 넘어: 추가 최적화

useTransition은 가치 있는 도구이지만 퍼즐의 한 조각일 뿐입니다. 사용자 경험을 진정으로 최적화하려면 다음 추가 전략을 고려하십시오.

결론: 더 나은 미래를 위해 동시 렌더링 수용

useTransition 훅은 React 개발의 중요한 진전을 나타내며 개발자가 더 반응성이 뛰어나고 매력적인 사용자 경험을 만들 수 있도록 지원합니다. 동시 렌더링 원칙을 이해하고 모범 사례를 적용함으로써 useTransition을 활용하여 애플리케이션을 최적화하고 전 세계 사용자에게 원활한 경험을 제공할 수 있습니다. 네트워크 조건, 장치 기능 및 문화적 감수성과 같은 글로벌 요소를 고려하여 진정으로 포용적이고 접근 가능한 웹 애플리케이션을 만드십시오.

React가 계속 발전함에 따라 useTransition과 같은 새로운 기능을 수용하는 것은 앞서 나가고 다양하고 전 세계적인 청중의 요구를 충족하는 뛰어난 사용자 경험을 제공하는 데 매우 중요합니다. 성능, 접근성 및 문화적 감수성의 우선순위를 지정함으로써 기능적일 뿐만 아니라 모든 사람이 사용하기에 즐거운 웹 애플리케이션을 만들 수 있습니다.