Remix v3: React를 포기한 웹 개발의 전환점

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드 아키텍트, 웹 개발자, 프레임워크 선택 고민 중인 팀

(난이도: 중급 이상 / React 및 프레임워크 전환 경험자 대상)

핵심 요약

Remix v3는 React를 포기하고 Preact 포크를 기반으로 개발 철학을 완전히 전환
6가지 핵심 원칙이 현대 웹 개발의 기존 패턴을 재정의 (예: AI 최적화, 웹 표준 우선)
React 기반 앱의 주요 문제점 드러냄 (예: JavaScript 의존성, 비동기 처리 비효율)

섹션별 세부 요약

1. Remix v3의 전환 배경

Remix v2 → React Router v7 통합 (Shopify, GitHub 등 1100만 개 프로젝트 사용)
React Router v7은 정적/동적 렌더링 모두 지원 (Next.js 대비 유연성 강조)
Remix v3는 Preact 포크 기반으로 개발 (React 대체, 3KB 크기)

2. 6가지 핵심 원칙

AI 최적화: 코드가 인간과 AI 모두 이해할 수 있도록 설계 (예: userOperations 인터페이스)
웹 표준 우선: JavaScript 의존 없이도 작동하는 폼 처리 (예: fetch 사용)
빌드 도구 단순화: webpack, Babel 없이도 npm run build로 처리 가능
React 의존성 문제: React 자체가 의존성 문제로 작용 (Preact로 대체)
모듈화 현실: 단일 목적, 교체 가능한 모듈 중심 설계
개발자 경험: 복잡한 도구 없이 통합된 워크플로우 제공

3. React vs. Web Standards 비교

React 패턴의 한계:

```javascript

const [data, setData] = useState(null);

useEffect(() => fetch('/api/data').then(setData), []);

```

→ 문제점: JavaScript 실패 시 기능 중단

Web Standards 기반:

```html

```

→ 장점: JavaScript 없이도 폼 제출 가능

4. 데이터 로딩 패턴 비교

React 기반:

```javascript

function UserProfile({ userId }) {

const [user, setUser] = useState(null);

useEffect(() => {

getUser(userId).then(setUser);

}, [userId]);

}

```

→ 문제점: 데이터 로딩 시 waterfall 패턴으로 지연 발생

Remix v3:

```javascript

export async function loader({ params }) {

const [user, posts, followers] = await Promise.all([

getUser(params.userId),

getUserPosts(params.userId),

getFollowers(params.userId)

]);

return json({ user, posts, followers });

}

```

→ 장점: 병렬 로딩으로 지연 최소화

5. Remix v3의 기능 변화

내장 DB 드라이버: ORM 의존성 없이 직접 DB 연동

```javascript

import { db } from '@remix-run/database';

export async function loader({ params }) {

const user = await db.users.findById(params.id);

return json({ user });

}

```

Reach UI 복귀: 접근성 중심 컴포넌트 라이브러리 재도입

6. 프레임워크 비교 (Next.js 15.3, React Router v7, Remix v3)

|--------------|--------------------|----------------------|----------------------|

| 의존성 | 중간 이상 | React 생태계 | 최소/무 |

결론

Remix v3의 전환은 프레임워크 선택에 대한 재고찰을 유도 (React 의존성 vs. 웹 표준)
중소기업/스타트업: React Router v7을 Next.js보다 고려 (진행성 강화, 복잡성 감소)
기업용: Next.js의 빅테크 종속성 문제 인식 필요, React Router v7의 플랫폼 독립성 활용 권장
핵심 팁: 프레임워크 선택 시 AI 최적화, 웹 표준 준수, 별도 빌드 프로세스 제거 등 요소를 반드시 검토해야 함