React의 useTransition과 useDeferredValue로 렌더링 최적화

//UseTransitionExample.js

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

export default function UseTransitionExample() {
  const [query, setQuery] = useState('');
  const [filteredItems, setFilteredItems] = useState([]);
  const [isPending, startTransition] = useTransition();

  const items = Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`);

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

    startTransition(() => {
      const filtered = items.filter((item) => item.includes(value));
      setFilteredItems(filtered);
    });
  };

  return (
    <div>
      <h1>React useTransition 예제</h1>
      <input
        type="text"
        value={query}
        onChange={handleChange}
        placeholder="검색어 입력"
      />
      {isPending && <p>Loading...</p>}
      <ul>
        {filteredItems.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

 

// UseDeferredValueExample.js

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

export default function UseDeferredValueExample() {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);

  const items = Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`);
  const filteredItems = items.filter((item) => item.includes(deferredQuery));

  return (
    <div>
      <h1>React useDeferredValue 예제</h1>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="검색어 입력"
      />
      <ul>
        {filteredItems.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

 

// useTransition과 useDeferredValue를 통해 복잡한 렌더링 작업의 사용자 경험을 개선 가능