startTransition

 

🎯 startTransition이란 무엇인가요?

startTransition은 React에서 긴급하지 않은 화면 업데이트를 "우선순위를 낮춰서" 실행하는 기능이에요.
복잡한 작업으로 인해 화면이 버벅거리는 걸 막고, 부드럽게 화면을 전환해줘요.

 

🍕 비유로 이해하기: 햄버거 가게 이야기

여러분이 햄버거 가게를 운영하고 있다고 생각해 보세요. 🍔

1. 일반적인 상황
   • 손님이 동시에 여러 주문을 해요.
   • **햄버거 10개를 만드는 일(무거운 작업)**과 함께 **새로운 손님이 주문하는 걸 받는 일(긴급한 작업)**이 겹치면 가게는 정신이 없겠죠?
   • 이럴 땐 손님 주문도 제대로 못 받고 가게가 버벅일 거예요.
2. startTransition을 사용하면?
   • "햄버거 10개 만드는 건 잠깐 뒤로 미루고, 먼저 새로운 손님 주문부터 받아야지!"
   • 즉, 긴급한 일(입력, 클릭 등)을 먼저 처리하고, 무거운 작업은 나중에 실행합니다.
   • 이렇게 하면 손님을 기다리게 하지 않고 가게가 부드럽게 돌아가겠죠?

React에서 startTransition도 같은 역할을 해요!
화면을 부드럽게 전환하기 위해 중요한 작업(긴급)을 먼저 처리하고, 덜 중요한 작업은 나중에 실행해줍니다.

 

🛠️ startTransition 사용법

startTransition은 React의 useTransition 훅과 함께 사용됩니다.
이제 간단한 예제를 통해 알아볼게요!

 

예제: 긴급한 업데이트와 덜 중요한 업데이트

1. 기본 코드 (startTransition 없이)

import React, { useState } from 'react';

export default function App() {
  const [input, setInput] = useState('');
  const [items, setItems] = useState([]);

  const handleChange = (e) => {
    const value = e.target.value;
    setInput(value); // 입력 값 업데이트
    const newItems = Array(10000).fill(value); // 무거운 작업: 10,000개의 항목 생성
    setItems(newItems); // 화면에 새로운 목록 표시
  };

  return (
    <div>
      <h1>StartTransition 예제</h1>
      <input value={input} onChange={handleChange} placeholder="입력해보세요" />
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

설명:

• 사용자가 입력창에 글자를 입력하면 handleChange가 실행돼요.
• 문제점:
  입력창에 글자를 입력할 때마다 10,000개의 항목이 생성되기 때문에 화면이 버벅거릴 수 있어요.
  사용자가 글자를 입력하는 긴급한 작업도 늦어지겠죠?

 

2. startTransition을 사용해서 최적화하기

startTransition을 사용해 입력값(긴급 작업)은 즉시 업데이트하고, 항목 생성(덜 긴급한 작업)은 나중에 실행되도록 만들어볼게요.

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

export default function App() {
  const [input, setInput] = useState('');
  const [items, setItems] = useState([]);

  const handleChange = (e) => {
    const value = e.target.value;
    setInput(value); // 입력 값은 바로 업데이트 (긴급한 작업)

    // startTransition으로 무거운 작업 처리 (덜 중요한 작업)
    startTransition(() => {
      const newItems = Array(10000).fill(value);
      setItems(newItems);
    });
  };

  return (
    <div>
      <h1>StartTransition 예제</h1>
      <input value={input} onChange={handleChange} placeholder="입력해보세요" />
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

🔍 코드 설명

1. 긴급한 작업
   • setInput(value)는 즉시 실행돼서 입력창에 입력이 바로 반영됩니다.
2. 덜 중요한 작업
   • startTransition 안에 setItems를 넣어서 10,000개의 항목 생성과 같은 무거운 작업은 나중에 실행됩니다.
3. 결과
   • 입력창에 글자를 입력하는 동작이 버벅이지 않고 부드럽게 반응합니다.
   • 무거운 작업은 입력이 끝난 후에 실행되므로 사용자 경험이 좋아져요.

 

🚀 startTransition이 필요한 이유

1. UI 버벅임 방지
   • 무거운 작업 때문에 입력이나 클릭 같은 긴급한 작업이 느려지는 문제를 해결해 줍니다.
2. 사용자 경험 향상
   • 화면이 부드럽게 전환되기 때문에 사용자 경험이 훨씬 좋아집니다.
3. 우선순위 제어
   • React가 긴급한 업데이트를 먼저 처리하고 덜 중요한 작업은 나중에 실행하게 해줍니다.

 

⚠️ 주의할 점

1. React 18 이상에서만 사용 가능
   • startTransition은 React 18 버전부터 제공됩니다.
2. 무조건 사용하는 건 아니에요
   • 모든 작업에 startTransition을 사용할 필요는 없고, 무거운 작업이 UI를 방해할 때만 사용하면 돼요.

 

🌟 한 줄 요약

**startTransition**은 긴급한 작업(예: 입력, 클릭)이 부드럽게 처리되도록 하고, 무거운 작업은 나중에 실행하게 도와주는 기능이에요.

 

 

🎉 마무리

React의 startTransition은 사용자 경험을 부드럽게 만들어주는 멋진 도구입니다.
화면이 버벅거리거나 느려질 때 이 기능을 사용하면 UI를 깔끔하고 매끄럽게 유지할 수 있어요. 😊