5단계 — React 19 의 핵심

React 는 화면을 컴포넌트 단위로 짜는 라이브러리예요. 같은 버튼이 100 곳에 있어도 한 군데만 고치면 다 바뀌게.

React 19 는 새 Compiler 가 자동 메모이제이션을 해 줍니다. useMemo, useCallback 거의 안 써도 OK.

첫 컴포넌트

// Counter.tsx
import { useState } from "react";

export function Counter() {
  const [n, setN] = useState(0);
  return (
    <button onClick={() => setN(n + 1)}>
      눌린 횟수: {n}
    </button>
  );
}

세 가지가 보여요.

함수 = 컴포넌트 (대문자로 시작)
useState(0) — 컴포넌트 안에서 변하는 값을 상태 라고 부릅니다
setN(n + 1) — 상태를 바꾸면 React 가 화면을 자동으로 다시 그려요

props — 부모가 자식에게 건네는 것

function Greeting({ name }: { name: string }) {
  return <h1>안녕, {name}!</h1>;
}

// 사용처
<Greeting name="코딩스테어즈" />

name 처럼 부모에서 자식으로 내려보내는 값을 props 라고 해요. 컴포넌트는 같은 props 면 같은 화면을 그려야 합니다 (순수 함수처럼).

React 19 가 바뀐 점

Compiler: 빌드할 때 자동으로 최적화. 수동 메모이제이션 거의 불필요
use hook: Promise 를 그대로 컴포넌트에서 쓸 수 있음
Actions: 폼 제출이 한결 깔끔해짐 (서버 컴포넌트와 잘 맞음)

직접 해 보기

pnpm create next-app@latest my-first-react 로 프로젝트를 만들고 app/page.tsx 를 위 Counter 로 바꿔 보세요. pnpm dev → http://localhost:3000 에서 동작 확인.

더 깊이

다음 단계

6단계에서는 React 컴포넌트들을 라우트로 묶어 주는 Next.js 를 만나요.