5단계
5단계 — React 19 의 핵심
30 분
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: 빌드할 때 자동으로 최적화. 수동 메모이제이션 거의 불필요
usehook: Promise 를 그대로 컴포넌트에서 쓸 수 있음- Actions: 폼 제출이 한결 깔끔해짐 (서버 컴포넌트와 잘 맞음)
직접 해 보기
pnpm create next-app@latest my-first-react 로 프로젝트를 만들고 app/page.tsx 를 위 Counter 로 바꿔 보세요. pnpm dev → http://localhost:3000 에서 동작 확인.
더 깊이
다음 단계
6단계에서는 React 컴포넌트들을 라우트로 묶어 주는 Next.js 를 만나요.