React Fiber 아키텍처

// React 15의 문제점 시나리오
function BigList({ items }) {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>
          <ComplexComponent data={item} />
        </li>
      ))}
    </ul>
  );
}

// 10,000개 아이템 렌더링 시
// 전체 트리를 한 번에 처리 → UI 멈춤 발생

// 타임 슬라이싱 효과 비교
// Before Fiber: 10,000개 → 전체 한 번에 처리 → UI 멈춤
// After Fiber: 100개씩 100번 → 중간에 입력 처리 → 응답성 유지

function processLargeList(items) {
  // Fiber 없음: 블로킹
  items.forEach((item) => processItem(item));

  // Fiber 적용: 타임 슬라이싱
  // React가 자동으로 작업을 분할하여 처리
}

// 우선순위 기반 업데이트 예시
function SearchComponent() {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState([]);

  const handleInputChange = (e) => {
    // 높은 우선순위: 즉시 처리
    setQuery(e.target.value);

    // 낮은 우선순위: 검색 결과 업데이트
    startTransition(() => {
      setResults(searchResults(e.target.value));
    });
  };

  return (
    <div>
      <input value={query} onChange={handleInputChange} />
      <SearchResults results={results} />
    </div>
  );
}

// 작업 중단 시나리오
// 1. 대량 리스트 렌더링 중 (낮은 우선순위)
// 2. 사용자 클릭 발생 (높은 우선순위)
// 3. 리스트 렌더링 중단 → 클릭 처리
// 4. 클릭 처리 완료 → 리스트 렌더링 재개

// Fiber Node의 핵심 구조
const fiberNode = {
  // 컴포넌트 정보
  type: "div", // 컴포넌트 타입
  key: "unique-key", // React key
  props: { className: "container" },

  // 트리 구조
  child: null, // 첫 번째 자식
  sibling: null, // 다음 형제
  return: null, // 부모 노드

  // 상태 관리
  memoizedState: null, // 이전 상태
  pendingProps: null, // 새로운 props
  memoizedProps: null, // 이전 props

  // 작업 관리
  effectTag: null, // 수행할 작업 타입
  nextEffect: null, // 다음 effect

  // 스케줄링
  expirationTime: 0, // 만료 시간
  childExpirationTime: 0, // 자식 만료 시간
};

// Render Phase에서 호출되는 메서드들
class MyComponent extends Component {
  constructor(props) {
    // Render Phase에서 호출 가능
  }

  static getDerivedStateFromProps() {
    // Render Phase에서 호출 가능
  }

  shouldComponentUpdate() {
    // Render Phase에서 호출 가능
  }

  render() {
    // Render Phase에서 호출
    // 순수해야 함 - 사이드 이펙트 금지
    return <div>Content</div>;
  }

  getSnapshotBeforeUpdate() {
    // Render Phase에서 호출 가능
  }
}

// Commit Phase에서 호출되는 메서드들
class MyComponent extends Component {
  componentDidMount() {
    // Commit Phase - Layout 단계
    // DOM 조작, API 호출 가능
    this.setState({ mounted: true });
  }

  componentDidUpdate() {
    // Commit Phase - Layout 단계
    // 사이드 이펙트 수행 가능
  }

  componentWillUnmount() {
    // Commit Phase - Before Mutation 단계
    // 정리 작업 수행
  }
}

// 함수형 컴포넌트에서
function MyComponent() {
  useEffect(() => {
    // Commit Phase - 비동기적으로 실행
    fetchData();

    return () => {
      // cleanup - Before Mutation 단계
      clearTimeout(timer);
    };
  });

  useLayoutEffect(() => {
    // Commit Phase - Layout 단계 (동기적)
    measureDOM();
  });
}

// Suspense로 지연 로딩 처리
function App() {
  return (
    <div>
      <Header />
      <Suspense fallback={<Loading />}>
        <AsyncComponent />
      </Suspense>
    </div>
  );
}

// Fiber의 역할:
// 1. AsyncComponent 로딩 중에도 Header는 정상 렌더링
// 2. 데이터 로딩 완료 시 우선순위에 따라 업데이트
// 3. 로딩 상태 전환을 부드럽게 처리

// React 18의 Concurrent Features
function SearchApp() {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState([]);

  const handleSearch = (value) => {
    setQuery(value); // 즉시 업데이트

    startTransition(() => {
      // 낮은 우선순위로 처리
      setResults(expensiveSearch(value));
    });
  };

  return (
    <div>
      <SearchInput value={query} onChange={handleSearch} />
      {/* 검색 중에도 입력은 즉시 반응 */}
      <SearchResults results={results} />
    </div>
  );
}

// 10,000개 아이템 렌더링
function LargeList({ items }) {
  return (
    <div>
      {items.map((item) => (
        <ExpensiveItem key={item.id} data={item} />
      ))}
    </div>
  );
}

// 문제점:
// - 전체 리스트를 한 번에 처리
// - 렌더링 중 사용자 입력 차단 (300ms+)
// - 스크롤이나 클릭 응답 불가

// 동일한 컴포넌트, Fiber가 자동 최적화
function LargeList({ items }) {
  return (
    <div>
      {items.map((item) => (
        <ExpensiveItem key={item.id} data={item} />
      ))}
    </div>
  );
}

// 개선점:
// - 자동 타임 슬라이싱 (5ms 단위)
// - 렌더링 중에도 사용자 입력 처리
// - 16ms 프레임 예산 준수
// - 부드러운 사용자 경험

// useDeferredValue로 비중요 업데이트 지연
function SearchResults({ query }) {
  const deferredQuery = useDeferredValue(query);
  const results = useMemo(() => searchDatabase(deferredQuery), [deferredQuery]);

  return <ResultsList results={results} />;
}

// startTransition으로 우선순위 조정
function FilteredList({ items, filter }) {
  const [isPending, startTransition] = useTransition();
  const [filteredItems, setFilteredItems] = useState(items);

  const handleFilter = (newFilter) => {
    startTransition(() => {
      setFilteredItems(items.filter(newFilter));
    });
  };

  return (
    <div>
      <FilterInput onChange={handleFilter} />
      {isPending && <Spinner />}
      <ItemList items={filteredItems} />
    </div>
  );
}

// React DevTools Profiler 활용
import { Profiler } from "react";

function onRenderCallback(id, phase, actualDuration) {
  console.log("Component:", id);
  console.log("Phase:", phase); // mount or update
  console.log("Duration:", actualDuration); // ms
}

<Profiler id="App" onRender={onRenderCallback}>
  <App />
</Profiler>;

// ✅ 권장: 순수 함수형 컴포넌트
function PureComponent({ data }) {
  return useMemo(() => <div>{expensiveCalculation(data)}</div>, [data]);
}

// ❌ 지양: Render Phase에서 사이드 이펙트
function ProblematicComponent({ data }) {
  // 렌더링 중 API 호출 - Fiber에서 여러 번 실행될 수 있음
  fetch("/api/analytics"); // 잘못된 위치

  return <div>{data}</div>;
}

// ✅ 수정: useEffect로 분리
function GoodComponent({ data }) {
  useEffect(() => {
    fetch("/api/analytics"); // 올바른 위치
  }, []);

  return <div>{data}</div>;
}