[React] Transition의 단계와 동작 원리 톺아보기!🌟

React Transition 톺아보기! 🌟

React에서 useTransition과 같은 Transition 기능은 사용자 경험(UX)을 부드럽게 유지하면서 상태 업데이트를 효과적으로 관리하는 도구입니다. 버벅거림 없이 매끄럽게 동작하게 하는 것이 고민이라면 꼭 알아보면 좋을 기능입니다.

 

Transition을 이해하려면 그 단계와 React의 내부 동작 원리를 살펴보는 것이 필요한데요, Rendering, Pending, 그리고 Completed단계들을 중심으로 톺아보도록 할께요.

---

🌈 Transition의 단계와 흐름

React Transition은 상태 업데이트를 🔴 긴급 작업(Urgent)과 🔵 비긴급 작업(Non-Urgent)으로 나누어 처리합니다.

 

이 과정에서 주요 단계는 다음과 같습니다:

1️⃣ Transition Start: 작업 시작
2️⃣ Pending State: 대기 중
3️⃣ Render: 새로운 상태 렌더링
4️⃣ Completed State: 완료 

---

1️⃣ Transition Start: 작업 시작

사용자 상호작용:

사용자가 버튼을 클릭하거나 입력을 할 때, React가 이벤트를 감지해 작업을 시작합니다. (이벤트 트리거의 예: 버튼 클릭, 입력 등)

 

React 스케줄링

사용자가 이벤트를 트리거하면, React는 startTransition으로 래핑된 작업을 🔵 비긴급으로 예약합니다.

(🔴 긴급 작업과 🔵 비긴급 작업을 구분하여 효율적으로 처리하기 위함)

 

즉각적인 UI 업데이트

🔴 긴급 상태는 즉시 업데이트되어 사용자 입력에 신속하게 반응합니다.

(즉, 버튼 클릭 후 바로 피드백을 제공하여 사용자가 상호작용하고 있다는 느낌을 받을 수 있도록 하는 것)

startTransition(() => {
  // 비긴급 상태 업데이트
  setData(newData);
});

---

2️⃣ Pending State: 대기 중

Transition이 진행 중이면

React는 isPending을 true로 설정하여 현재 Transition이 진행 중임을 나타냅니다.

이 상태에서 사용자는 여전히 UI와 상호작용할 수 있고, React는 대기 상태를 관리합니다.

 

긴급 작업 처리 후 비긴급 작업 시작

이 단계에서는 모든 🔴 긴급 작업이 완료된 후 🔵 비긴급 작업이 시작됩니다.

이 시점에 로딩 UI를 표시하여 사용자에게 현재 상태를 알릴 수 있습니다.

{isPending && <p>Loading...</p>}

---

3️⃣ Render: 새로운 상태 렌더링

비긴급 상태 업데이트가 완료

비긴급 상태 업데이트가 완료되면, React는 새로운 상태로 컴포넌트를 렌더링합니다.

이 과정에서 React는 이전 상태와 새 상태를 비교(diffing)하여 변경된 부분만 DOM에 반영합니다. (성능을 극대화하는 중요한 단계)

 

Rendering 중 특징:

• Concurrent Rendering
  • React는 UI를 멈추지 않고 작업을 병렬로 처리하여 최적의 성능을 유지함
  • 사용자는 중간에 UI가 멈추는 것을 경험하지 않고 자연스러운 흐름을 유지할 수 있음
• Batching
  • 여러 상태 업데이트를 한 번의 렌더링 작업으로 병합하여 효율성을 높임(불필요한 렌더링 🔺, 성능🔻)

---

4️⃣ Completed State: 완료

Transition이 완료

Transition이 완료되면 isPending이 false로 변경됩니다.

이 시점에서 로딩 UI는 사라지고, 새로운 상태가 반영된 화면이 사용자에게 보여져 결과를 즉시 확인할 수 있습니다.

{!isPending && <ul>{data.map(item => <li key={item}>{item}</li>)}</ul>}

 

👉 로딩이 끝난 후 사용자에게 새로운 데이터를 리스트 형태로 보여줍니다.

---

🔄 Transition 동작 원리

 

React Transition은 스케줄링과 우선순위 관리를 통해 동작합니다. 이를 이해하기 위해 내부 구조를 살펴봅시다.

1️⃣  🔴 긴급 작업 vs 🔵 비긴급 작업

React는 Transition에서 🔴 긴급 작업과 🔵  비긴급 작업을 구분합니다.

• 🔴 긴급 작업
  • 사용자 입력, 클릭 등 즉각적인 반응이 필요한 상태 업데이트(버튼을 클릭하거나 폼에 데이터를 입력할 때 리액트는 이 작업을 최우선으로 처리한다.)
• 🔵 비긴급 작업
  • 대규모 데이터 필터링, 렌더링과 같은 작업(즉각적인 반응이 필요하지 않기 때문에, 사용자가 상호작용하는 동안 배경에서 처리한다.)

setImmediateState("urgent"); // 긴급
startTransition(() => setNonImmediateState("non-urgent")); // 비긴급

 

2️⃣ Concurrent Rendering

React는 끊김 없는 인터페이스가 제공되도록 🔵 비긴급 작업을 스케줄링하여 UI가 멈추지 않도록 보장합니다.

🚀 긴급 작업 우선 처리  이후 남은 시간 동안⏳ 비긴급 작업 차례로 수행 이때 UI가 자연스럽게 업데이트 되고 즉시 확인이 가능합니다.

---

📠 상태별 React의 행동 요약

상태	React 행동
Initial	Transition 시작 전. 기존 상태를 유지하며 새로운 작업을 예약합니다.
Pending	비긴급 상태 업데이트 진행 중. UI는 기존 상태를 유지하며 로딩 상태를 표시할 수 있습니다.
Rendering	새로운 상태로 컴포넌트를 렌더링합니다. 비긴급 작업이 모두 완료되면 진행됩니다.
Completed	Transition 완료. 새로운 상태를 사용자에게 표시하며 로딩 상태를 제거합니다.

---

📟 Redendering 중 발생할 수 있는 상황과 문제

Transition 작업 중 주의해야 할 몇 가지 사례와 문제를 살펴보겠습니다.

 

1️⃣ 사용자 상호작용 중단 문제

🔒 블로킹 이슈:

Transition 중 긴급 상태 업데이트가 블로킹되면 사용자 경험이 나빠질 수 있습니다.

예를 들어, 사용자가 버튼을 클릭했을 때 반응이 느리거나, 화면이 멈춘 것 같은 느낌을 받을 수 있습니다.

 

💡 해결책:

startTransition 으로 비긴급 작업을 예약하여 이 문제를 해결합니다.

(긴급 작업이 우선 처리, 비긴급 작업은 사용자 상호작용이 완료된 후에 처리 되도록 해줌)

 

2️⃣ isPending 상태 관리

⚠️ 겹치는 Transition 문제:

여러 Transition 작업이 동시에 발생하면, 로딩 상태가 올바르게 관리되지 않을 수 있습니다.

예를 들어, 사용자가 여러 버튼을 빠르게 클릭하면, 각 클릭에 대한 로딩 상태가 난리가 날 수 있습니다.

 

🔑 해결책:

상태별로 isPending 플래그를 구분하거나 고유 작업 ID를 사용할 수 있습니다.

const [isPending1, startTransition1] = useTransition();
const [isPending2, startTransition2] = useTransition();

---

💼 실용적인 Transition 예제

1️⃣ 필터링 작업에서의 활용

function FilterExample() {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState([]);
  const [isPending, startTransition] = useTransition();

  const handleInputChange = (e) => {
    const input = e.target.value;
    setQuery(input);

    startTransition(() => {
      const filtered = mockData.filter(item => item.includes(input));
      setResults(filtered);
    });
  };

  return (
    <div>
      <input type="text" value={query} onChange={handleInputChange} />
      {isPending ? <p>Loading...</p> : <ul>{results.map(r => <li key={r}>{r}</li>)}</ul>}
    </div>
  );
}

2️⃣ 모달 창을 통한 Transition 예제

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

const Modal = ({ onClose }) => {
  return (
    <div style={modalStyles}>
      <h2>뿅</h2>
      <p>이곳은 Transition을 통해 열리는 모달입니동!</p>
      <button onClick={onClose}>닫기</button>
    </div>
  );
};

const App = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [isPending, startTransition] = useTransition();

  const openModal = () => {
    startTransition(() => {
      setIsOpen(true);
    });
  };

  const closeModal = () => {
    startTransition(() => {
      setIsOpen(false);
    });
  };

  return (
    <div>
      <h1>React Transition 예제</h1>
      <button onClick={openModal}>모달 열기</button>
      {isOpen && <Modal onClose={closeModal} />}
      {isPending && <p>모달을 여는 듕...</p>}
    </div>
  );
};

export default App;

---

실무에서의 팁 🌟

1️⃣ 로딩 UI를 명확히

🔍 사용자 피드백 제공:

Transition 중에는 isPending을 활용하여 로딩 상태를 사용자에게 명확히 보여주는 것이 중요합니다.

사용자가 어떤 작업을 수행하고 있는지, 그리고 그 작업의 진행 상황이 어떻게 되는지를 알 수 있도록 해야 합니다.

예를 들어, 모달을 여는 동안 "로딩 중..." 메시지나 애니메이션을 표시하는 것이 좋습니다.

 

🎨 시각적 요소 활용

로딩 UI는 단순한 텍스트 메시지뿐만 아니라, 스피너, 프로그레스 바 등 다양한 직관적 시각적 요소를 활용하는 것이 좋습니다.

 

2️⃣ 긴급 상태 우선 처리

⚡️ 빠른 반응성 유지:

startTransition을 적재적소에 사용하여 긴급 상태가 지연되지 않도록 설계하는 것이 좋습니다..

사용자가 버튼을 클릭하거나 입력을 할 때와 같은 긴급 작업은 즉시 반응해야 합니다.

꼭! 비긴급 작업이 긴급 작업을 블로킹하지 않도록 설계하는 것이 중요합니다.

🧩 작업 흐름 최적화

긴급 작업을 우선으로 처리하고, 비긴급 작업은 이후에 수행하도록 스케줄링하는 것이 하나의 꿀팁입니다.

예를 들어, 데이터 필터링 작업이 있을 때는 사용자의 입력이 완료된 후에 처리하도록 하여 UI의 반응성을 유지하면 부드럽게 보입니다!

 

3️⃣ 큰 작업은 배치로 나누기

📦 비긴급 작업 세분화

비긴급 작업이 클 경우, 이를 작은 작업으로 적절히 나눠서 실행하는 것이 성능 저하를 방지에 도움이 됩니다.

이는 한 번에 많은 양의 데이터를 처리하면 렌더링 성능이 저하될 수 있기 때문입니다.

🔄 예시

예를 들어, 대규모 데이터셋을 필터링할 때, 모든 데이터를 한 번에 처리하기보다는

몇 개의 작은 배치로 나누어 처리하면 UI가 더 매끄럽게 반응할 수 있습니다.

이렇게 하면 사용자는 대기 시간을 최소화하고, 애플리케이션의 전반의 성능을 높일 수 있답니다.

 

🌷전설의 개발자가 되어봅시당! 🌷