라이브러리와 프레임워크의 차이

React는 라이브러리입니다. UI를 만드는 도구를 제공하지만, 라우팅, 데이터 페칭, 빌드 설정은 여러분이 직접 선택해서 조합해야 합니다.

Next.js는 프레임워크입니다. React를 기반으로 하되, 라우팅, 서버 렌더링, 빌드 최적화 등 웹 앱을 만드는 데 필요한 것들을 이미 갖추고 있습니다.

쉽게 말하면, React는 재료이고 Next.js는 레시피가 포함된 요리 키트입니다.

같은 것을 다르게 만들기

간단한 블로그 글 목록 페이지를 React와 Next.js로 각각 만들어봅니다.

React로 만들기

React에서는 보통 이렇게 작성합니다.

// React (CRA 또는 Vite)
import { useState, useEffect } from "react";

function PostList() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/posts")
      .then((res) => res.json())
      .then((data) => {
        setPosts(data);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>로딩 중...</div>;

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}
```text

이 코드는 브라우저에서 실행됩니다. 페이지가 열리면 빈 화면이 보이다가, API 요청이 끝나면 목록이 나타납니다.

### Next.js로 만들기

Next.js에서는 이렇게 작성합니다.

```tsx
// Next.js (App Router)
async function PostList() {
  const posts = await fetch("https://api.example.com/posts").then((res) =>
    res.json()
  );

  return (
    <ul>
      {posts.map((post: { id: number; title: string }) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}
```text

`useEffect`가 없습니다. `useState`도 없습니다. 그냥 `async` 함수입니다. 이 컴포넌트는 **서버에서 실행**되고, 데이터가 채워진 완성된 HTML이 브라우저로 전달됩니다.

## 라우팅의 차이

React에서 라우팅을 하려면 `react-router-dom` 같은 별도 라이브러리를 설치하고 설정해야 합니다.

```jsx
// React + react-router-dom
import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/posts/:id" element={<PostDetail />} />
      </Routes>
    </BrowserRouter>
  );
}
```text

Next.js에서는 파일을 만드는 것으로 라우팅이 끝납니다.

app/ ├── page.tsx → / ├── about/ │ └── page.tsx → /about └── posts/ └── [id]/ └── page.tsx → /posts/123, /posts/456, ...

`app/posts/[id]/page.tsx` 파일을 만들면 `/posts/1`, `/posts/hello` 같은 동적 주소가 자동으로 처리됩니다. 설정 파일을 건드릴 필요가 없습니다.## 핵심 차이 비교| 항목 | React | Next.js ||------|-------|---------|| 종류 | UI 라이브러리 | 풀스택 프레임워크 || 렌더링 | CSR (기본) | SSR, SSG, ISR, CSR 모두 || 라우팅 | 별도 라이브러리 필요 | 파일 기반 내장 || API | 별도 백엔드 필요 | Route Handlers 내장 || 이미지 최적화 | 직접 처리 | `next/image` 자동 최적화 || SEO | 직접 설정 | `metadata` API 내장 || 배포 | 정적 파일 배포 | Vercel, Docker 등 다양 |## Next.js는 React를 포함합니다중요한 사실이 있습니다. Next.js는 React를 대체하는 것이 아닙니다. Next.js 안에서 여러분이 알던 React 코드를 그대로 씁니다.```tsx// Next.js 안에서도 React 훅을 씁니다"use client";  // 이 선언이 있으면 React 코드처럼 동작합니다import { useState } from "react";function Counter() {  const [count, setCount] = useState(0);  return (    <button onClick={() => setCount(count + 1)}>      클릭 횟수: {count}    </button>  );}

React를 배웠다면 Next.js에서도 그 지식이 그대로 쓰입니다. Next.js는 React 위에 더 많은 능력을 얹어준 것입니다.

다음 챕터에서는 Next.js를 둘러싼 생태계를 한눈에 살펴보겠습니다.