React 핵심 아키텍처 3가지: Fiber, Hooks, Concurrent Rendering과 Server Components

1. Fiber 아키텍처: React 렌더링 엔진의 재설계

React 16에서 도입된 Fiber 아키텍처는 React 내부 렌더링 엔진을 완전히 재작성한 구조입니다.
이전 React는 한 번 렌더링이 시작되면 끝날 때까지 멈출 수 없는 동기 렌더링 방식이었습니다.

즉 다음과 같은 문제가 있었습니다.

• 대규모 컴포넌트 트리에서 렌더링 지연 발생
• UI가 잠시 멈추는 현상
• 사용자 인터랙션 우선순위 제어 어려움

Fiber는 이를 해결하기 위해 렌더링 작업을 작은 단위로 분할하는 구조를 도입했습니다.

핵심 특징

• 렌더링 작업 분할 (Work units)
• 작업 중단 및 재개 가능
• 업데이트 우선순위 관리
• 비동기 렌더링 기반 제공

이 구조 덕분에 React는 이후 Concurrent Rendering과 같은 고급 기능을 구현할 수 있게 되었습니다.

간단히 말해 Fiber는 React의 렌더링 스케줄러 역할을 하는 내부 아키텍처입니다.

---

2. Hooks 패러다임: React 개발 방식의 변화

React 16.8에서 등장한 Hooks는 React 개발 방식 자체를 크게 바꾼 기능입니다.

기존 React는 대부분 클래스 컴포넌트 기반으로 작성되었습니다.

 

class Counter extends React.Component {
state = { count: 0 };

render() {
return (
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
{this.state.count}
</button>
);
}
}

 

하지만 Hooks 이후에는 함수형 컴포넌트 중심 구조가 되었습니다.

 

import { useState } from "react";

function Counter() {
const [count, setCount] = useState(0);

return (
<button onClick={() => setCount(count + 1)}>
{count}
</button>
);
}

 

Hooks의 주요 장점

• 상태 관리 단순화
• 로직 재사용 가능
• 클래스 컴포넌트 제거
• 코드 가독성 개선

대표적인 Hooks

• useState
• useEffect
• useContext
• useReducer
• useMemo
• useCallback

현재 대부분의 React 프로젝트는 Hooks 기반 개발 패턴을 사용합니다.

---

3. Concurrent Rendering: 사용자 경험 중심 렌더링

React 18에서 등장한 Concurrent Rendering은 React의 UI 업데이트 방식을 개선한 기능입니다.

기존 React는 UI 업데이트를 동기적으로 처리했습니다.
즉 렌더링이 시작되면 끝날 때까지 다른 작업을 처리하지 못했습니다.

Concurrent Rendering은 이를 개선하여 렌더링을 중단하고 우선순위가 높은 작업을 먼저 처리할 수 있게 합니다.

예시

 

import { startTransition } from "react";

startTransition(() => {
setData(newData);
});

 

이 기능을 사용하면 다음과 같은 효과가 있습니다.

• 사용자 입력 우선 처리
• 렌더링 지연 감소
• 대규모 UI에서도 부드러운 인터랙션

즉 React는 사용자 경험(UX)을 중심으로 렌더링 작업을 스케줄링하게 됩니다.

---

4. Server Components: 서버 중심 UI 아키텍처

React 19에서 본격적으로 활용되는 기능이 Server Components입니다.

기존 React는 대부분의 UI 로직이 브라우저에서 실행되는 클라이언트 중심 구조였습니다.

하지만 Server Components는 일부 React 컴포넌트를 서버에서 실행하도록 설계되었습니다.

예시

 

async function Page() {
const data = await fetchData();
return <div>{data.title}</div>;
}

 

Server Components의 장점

• 브라우저 번들 크기 감소
• 서버 데이터 처리 효율 증가
• 초기 페이지 로딩 속도 개선
• 보안 강화

특히 Next.js와 같은 프레임워크에서 Server Components는 중요한 역할을 합니다.

---

정리

React의 발전 과정에서 중요한 세 가지 아키텍처 변화는 다음과 같습니다.

Fiber 아키텍처

• React 렌더링 엔진 재설계
• 작업 분할 및 우선순위 관리

Hooks 패러다임

• 함수형 컴포넌트 중심 개발 방식
• 상태 관리와 로직 재사용 단순화

Concurrent Rendering과 Server Components

• 사용자 경험 중심 렌더링
• 서버 기반 UI 아키텍처 확장

이 세 가지 기술은 React가 단순한 UI 라이브러리에서 현대적인 프론트엔드 아키텍처 플랫폼으로 발전하는 핵심 기반이 되었습니다.