📖 TIL - React의 새로운 기능 쉽게 이해하기

React 18에서 도입된 Concurrent Features(동시성)의 핵심 개념들과 이것이 해결하고자 하는 문제들을 자세히 살펴보았습니다.

핵심 용어

Concurrent Features (동시성)
Tearing (티어링)
State as a Snapshot (스냅샷으로서의 상태)
Blocking vs Non-blocking Rendering

🤔 문제 접근

1. 기존 React의 렌더링 방식

동기식(Synchronous) 렌더링

• 한 번 시작된 렌더링은 중단 불가
• 큰 작업이 있으면 UI가 완전히 멈춤
• 사용자 입력이 지연되는 문제

2. 해결하려던 세 가지 큰 문제

블로킹 렌더링의 한계

• 긴 렌더링 작업 동안 브라우저 멈춤
• 사용자 입력 무시되는 현상

UI 일관성 문제 (Tearing)

• 화면이 일시적으로 불일치하는 현상
• 특히 외부 상태 관리시 자주 발생(ex. redux)

상태 업데이트의 예측 가능성

연속된 상태 업데이트의 처리
배치 업데이트의 한계

📌 왜 이런 기능이 필요했을까요?

기존의 문제점

카페에서 주문을 받는 상황으로 비유해볼게요!

React 18 이전: 한 명의 직원이 주문을 받고 음료를 만드는 상황

• 긴 주문이 들어오면 다른 손님들은 계속 기다려야 함
• 중간에 급한 주문이 들어와도 순서를 바꿀 수 없음
• 손님들이 오래 기다리게 되면서 불만이 생김

이런 문제를 해결하기 위해 React 18에서는 여러 가지 새로운 기능을 도입했어요!

🤔 새로운 기능들은 어떻게 작동하나요?

1. 동시성(Concurrent Features)

복잡한 쇼핑몰 페이지를 예로 들어볼까요?

이전 방식:

• 상품 목록 로딩 중에는 검색창도 멈춤
• 필터 선택도 버벅임
• 사용자가 답답함을 느낌

// 기존 React (동기적 렌더링)
function ProductList() {
  const [products, setProducts] = useState([]);
  
  useEffect(() => {
    // 무거운 API 호출
    fetchProducts().then(data => setProducts(data));
  }, []);

  // 문제: API 응답을 기다리는 동안 전체 UI가 블록됨
  return <div>{/* 제품 목록 렌더링 */}</div>;
}

새로운 방식:

function ProductList() {
  const [isPending, startTransition] = useTransition();
  const [products, setProducts] = useState([]);

  const loadProducts = () => {
    // 낮은 우선순위로 표시
    startTransition(() => {
      fetchProducts().then(data => setProducts(data));
    });
  };

  return (
    <div>
      {isPending ? (
        // 스켈레톤 UI나 로딩 표시
        <SkeletonLoader />
      ) : (
        // 실제 제품 목록
        <ProductGrid products={products} />
      )}
      
      {/* 이 부분은 계속 반응 가능! */}
      <SearchBar />
      <FilterOptions />
    </div>
  );
}

2. 티어링(Tearing) 현상

실시간 주식 가격 표시 앱을 예로 들어볼게요:

문제 상황:

// 전역 주식 가격
let stockPrice = 1000;

function StockWidget() {
  // 여러 컴포넌트에서 같은 가격을 표시하는데...
  const [price, setPrice] = useState(stockPrice);
  
  // 가격이 바뀌면 업데이트
  useEffect(() => {
    const handler = () => setPrice(stockPrice);
    subscribe(handler);
    return () => unsubscribe(handler);
  }, []);

  return <div>현재 가격: {price}원</div>;
}

문제점:

• StockWidget1: "현재 가격: 1000원"
• StockWidget2: "현재 가격: 1100원"
• 같은 데이터인데 다르게 보임!

해결방법:

function StockWidget() {
  // useSyncExternalStore로 해결
  const price = useSyncExternalStore(
    subscribe,
    () => stockPrice
  );

  return <div>현재 가격: {price}원</div>;
}

3. 상태 관리 라이브러리와 티어링

• Zustand: 자체적으로 티어링 방지 구현
• Redux: 명시적으로 useSyncExternalStore 사용 필요
• 걱정하지 않아도 되는 이유: 대부분의 최신 라이브러리들이 이미 처리하고 있음

✨ 새로운 기능의 장점

1. 더 부드러운 사용자 경험

   • 무거운 작업 중에도 UI 반응성 유지
   • 로딩 중에 스켈레톤 UI 표시 가능
   • 중요한 업데이트 우선 처리

2. 안정적인 데이터 표시

   • 티어링 없는 일관된 UI
   • 사용자 혼란 방지

3. 개발자 경험 개선

   • 성능 걱정 없이 기능 개발 가능
   • 자동으로 최적화 처리

⭐️ 정리하면

• React 18의 동시성: 긴 작업이 다른 작업을 방해하지 않도록
• 티어링 방지: 화면에 표시되는 데이터의 일관성 보장
• 최신 상태 관리 라이브러리들: 이미 이런 문제들을 고려하여 설계됨

실제 적용 시에는:
1. 무거운 작업은 startTransition으로 감싸기
2. 외부 상태 사용 시 적절한 도구 선택하기 (Zustand 등)
3. 로딩 상태에 대한 UI 준비하기 (스켈레톤 등)