React은 Library, Framework이 아니야

React이 안 채우는 빈자리

React은 component 모형 + renderer 만 줘. 그게 끝이야. 진짜 app 을 만들려면 React 이 답하지 않는 질문이 잔뜩 남아 — 그걸 다 npm 으로 끌어오고 직접 묶어서 영원히 관리해야 해.

직접 짜야 했던 것들

Routing — React Router 든 TanStack Router 든 + nested layout 전략.
Server rendering — SSR setup, hydration boundary, streaming.
Data fetching — 어디서 언제, 어떻게 cache 할지.
Code splitting — dynamic import, prefetch, chunking.
Build tooling — Vite/Webpack/Turbopack config, env, sourcemap.
Deployment — static? Node 서버? edge runtime?

Framework 가 이기는 이유

React 팀 자체가 이제 framework 부터 시작하라고 권해. Create React App 이 은퇴한 이유도 위 빈자리가 초보를 계속 물어서야. Next.js 가 채우는 방식은 convention — file-system routing, Server Component 가 default, fetch + caching primitive, image/font/script optimizer, Node 어디서든 도는 production 서버.

이 lesson 의 위치

여기서부터는 그 convention 위에서 만들 거야. params 가 Promise 라거나 fetch 가 cache 안 된다거나 component 가 server 에서 도는 게 낯설게 느껴지면, trade 를 떠올려 — 직접 wiring 안 해도 되는 대신 framework 의 의견을 받아들이는 거야.

Code

Pure React 의 빈자리·tsx

import { useState } from 'react';

// React 은 component 와 re-render 만 줘.
export function App() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

// 답이 없는 것:
//   - 이 HTML 이 hydrate 전에 어떻게 brower 에 도착해?
//   - /about 으로 어떻게 navigate 해?
//   - server 에서 fetch 어떻게 해?
//   - bundle 어떻게 해?
//   - deploy 어떻게 해?

같은 component 가 Next.js app 안에 들어가면·tsx

// app/page.tsx — Next.js 가 위 질문 다 답함
import Counter from './Counter';

export default async function Page() {
  const initial = await fetch('https://api.example.com/count', {
    next: { revalidate: 60 },
  }).then(r => r.json());

  return <Counter initial={initial.value} />;
}

React은 Library, Framework이 아니야

React이 안 채우는 빈자리

직접 짜야 했던 것들

Framework 가 이기는 이유

이 lesson 의 위치

Code

External links

Exercise

Progress

댓글 0