React란? — 컴포넌트 기반 UI 개발

React가 해결하는 문제#

순수 JavaScript로 UI를 만들면:

JavaScript

// 상태가 바뀔 때마다 직접 DOM 업데이트
const count = 0;
function increment() {
    count++;
    document.getElementById("count").textContent = count;
    // UI가 복잡해지면 이 작업이 폭발적으로 늘어남
}

React는 상태(state)가 바뀌면 UI가 자동으로 업데이트됩니다.

React의 핵심 개념#

Diagram · Mermaid

컴포넌트: UI를 독립적인 조각으로 나눈 함수
가상 DOM: 실제 DOM 변경 전 메모리에서 비교해 최소 업데이트
단방향 데이터 흐름: 부모 → 자식으로만 데이터 전달

개발 환경 설정 (Vite)#

Bash

# React + TypeScript 프로젝트 생성
npm create vite@latest my-react-app -- --template react-ts

cd my-react-app
npm install
npm run dev
# http://localhost:5173 에서 확인

프로젝트 구조#

Text

my-react-app/
├── src/
│   ├── App.tsx          # 루트 컴포넌트
│   ├── main.tsx         # 진입점
│   └── index.css        # 전역 스타일
├── index.html
├── package.json
└── vite.config.ts

첫 번째 컴포넌트#

TSX

// src/App.tsx
function App() {
    return (
        <div>
            <h1>안녕하세요, React!</h1>
            <p>첫 번째 컴포넌트입니다.</p>
        </div>
    );
}

export default App;

JSX: JavaScript + HTML#

JSX는 JavaScript 안에서 HTML처럼 보이는 문법입니다.

TSX

// JSX
const element = <h1 className="title">안녕하세요!</h1>;

// JSX가 변환되는 JavaScript
const element = React.createElement("h1", { className: "title" }, "안녕하세요!");

JSX 규칙#

TSX

function Component() {
    const name = "철수";
    const isActive = true;

    return (
        // 1. 하나의 루트 요소 (또는 Fragment)
        <>
            {/* 2. JSX 주석 */}
            <h1>안녕, {name}!</h1>

            {/* 3. class 대신 className */}
            <p className="text-blue">내용</p>

            {/* 4. 조건부 렌더링 */}
            {isActive && <span>활성</span>}

            {/* 5. 태그는 반드시 닫아야 함 */}
            <input type="text" />
            <br />
        </>
    );
}

컴포넌트 분리#

TSX

// src/components/Greeting.tsx
interface GreetingProps {
    name: string;
    age?: number;
}

function Greeting({ name, age }: GreetingProps) {
    return (
        <div>
            <h2>안녕하세요, {name}님!</h2>
            {age && <p>나이: {age}세</p>}
        </div>
    );
}

export default Greeting;

// src/App.tsx
import Greeting from "./components/Greeting";

function App() {
    return (
        <div>
            <Greeting name="철수" age={25} />
            <Greeting name="영희" />
        </div>
    );
}

React 18 진입점#

TSX

// src/main.tsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import "./index.css";

createRoot(document.getElementById("root")!).render(
    <StrictMode>
        <App />
    </StrictMode>,
);

StrictMode는 개발 환경에서 잠재적 문제를 감지합니다.

정리#

개념	설명
컴포넌트	UI 조각을 나타내는 함수
JSX	JavaScript 안의 HTML 문법
가상 DOM	최소 DOM 업데이트를 위한 메모리 표현
props	부모가 자식에게 전달하는 데이터
단방향 흐름	데이터는 부모 → 자식 방향으로만

다음 편에서는 Props와 State — 컴포넌트 간 데이터 전달과 상태 관리를 배웁니다.