React 무료로 배울 수 있나요?

네, 코드마스터의 React 강의는 전부 무료입니다. 광고도 없습니다. 개념노트는 로그인 없이 열람할 수 있습니다.

React 초보자도 따라갈 수 있나요?

네. 모든 레슨이 개념 설명 → 코드 예시 → 인터랙티브 데모 → 확인 퀴즈 순서로 구성되어 있어 사전 지식 없이도 따라올 수 있습니다.

React 학습에 얼마나 걸리나요?

각 레슨은 평균 30~60분 분량입니다. 하루 1~2개 기준 약 1~2개월이면 카테고리 전체를 완주할 수 있습니다.

JavaScript

폼 처리

💡 왜 배워야 할까요?

🎯 로그인, 회원가입, 검색 등 모든 웹사이트의 입력 창을 만들기 위해 필수입니다.

💼 사용자가 입력한 값을 실시간으로 검증하고 오류를 즉시 보여줄 수 있습니다.

⚡ 폼 데이터를 서버로 보내기 전에 올바른지 확인하는 기초 기술입니다.

🏢 실무에서는

실무에서는 회원가입 폼에서 비밀번호 입력 시 '8자 이상 필요' 같은 실시간 피드백을 보여주거나, 이메일 중복 확인 버튼을 누를 때 입력값을 서버로 전송합니다. 전자상거래 사이트의 결제 폼도 모두 이 패턴으로 만들어집니다.

폼 처리 패턴

React 폼 처리

제어 vs 비제어 컴포넌트

방식	특징	사용처
제어 (Controlled)	React가 값 관리	실시간 유효성 검증
비제어 (Uncontrolled)	DOM이 값 관리	간단한 폼
React 19 Actions	서버 액션 연동	Next.js App Router

2025 폼 라이브러리

▸React Hook Form: 성능 최적화, 비제어 기반
▸Zod: 스키마 기반 유효성 검증
▸React 19 Actions: 내장 폼 처리

💻 폼 처리 실습

import { useState, useActionState } from "react";

// 1. 제어 컴포넌트
function LoginForm() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [errors, setErrors] = useState<Record<string, string>>({});

  const validate = () => {
    const errs: Record<string, string> = {};
    if (!email.includes("@")) errs.email = "유효한 이메일을 입력하세요";
    if (password.length < 8) errs.password = "8자 이상 입력하세요";
    setErrors(errs);
    return Object.keys(errs).length === 0;
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (validate()) {
      console.log("로그인:", { email, password });
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div>
        <input type="email" value={email} onChange={e => setEmail(e.target.value)}
          className={`border rounded px-3 py-2 w-full ${errors.email ? "border-red-500" : ""}`}
          placeholder="이메일" />
        {errors.email && <p className="text-red-500 text-sm">{errors.email}</p>}
      </div>
      <div>
        <input type="password" value={password} onChange={e => setPassword(e.target.value)}
          className="border rounded px-3 py-2 w-full" placeholder="비밀번호" />
        {errors.password && <p className="text-red-500 text-sm">{errors.password}</p>}
      </div>
      <button type="submit" className="bg-blue-500 text-white px-4 py-2 rounded w-full">
        로그인
      </button>
    </form>
  );
}

// 2. React 19 Actions (Next.js)
async function submitForm(prevState: any, formData: FormData) {
  const email = formData.get("email") as string;
  const password = formData.get("password") as string;
  if (!email.includes("@")) return { error: "유효한 이메일을 입력하세요" };
  // API 호출
  return { success: true };
}

function ActionForm() {
  const [state, action, isPending] = useActionState(submitForm, null);
  return (
    <form action={action}>
      <input name="email" type="email" />
      <input name="password" type="password" />
      <button disabled={isPending}>{isPending ? "처리 중..." : "제출"}</button>
      {state?.error && <p className="text-red-500">{state.error}</p>}
    </form>
  );
}

💡 💡 폼 처리 팁

▸간단한 폼: useState + 직접 유효성 검증
▸복잡한 폼: React Hook Form + Zod
▸Next.js: Server Actions + useActionState
▸React 19: <form action={fn}> 패턴이 표준화

이 개념은 React 컴포넌트 개발에서 핵심적입니다. 리액트의 선언적 UI 패러다임을 이해하고, props와 state의 차이를 명확히 구분하세요. 컴포넌트는 입력(props)에 대해 항상 동일한 출력(JSX)을 반환하는 순수 함수처럼 동작해야 합니다.

⚛️ React 패턴 — 폼 처리

폼 처리을 React에서 어떻게 쓰는지 코드와 함께 단계별로 익혀보세요.

1 🧩 1. 폼 처리 사용 시나리오

이 기능이 필요한 상황.

↓

2 💻 2. 코드 작성

폼 처리의 기본 사용법.

↓

3 🎨 3. 렌더링 결과

사용자가 보는 화면.

↓

4 💡 4. 실무 팁

흔한 함정과 베스트 프랙티스.

📝 Form — Controlled Component

코드를 직접 수정하면 0.7초 후 자동 반영됩니다. React 18 + Babel로 브라우저에서 즉시 실행.

🖥️ 실행 결과 — 렌더링된 React 컴포넌트

✏️ React 코드 수정하기 (클릭해서 열기)

function App() {
  const [form, setForm] = React.useState({
    name: '', email: '', age: ''
  });
  const [submitted, setSubmitted] = React.useState(null);

const change = (k) => (e) => setForm({...form, [k]: e.target.value});

const submit = (e) => {
    e.preventDefault();
    setSubmitted({...form});
  };

return (
    <div style={{padding:20}}>
      <h2>📝 회원가입 (Controlled)</h2>
      <form onSubmit={submit}>
        <div style={{marginBottom:10}}>
          <label>이름: </label>
          <input value={form.name} onChange={change('name')} required />
        </div>
        <div style={{marginBottom:10}}>
          <label>이메일: </label>
          <input type="email" value={form.email} onChange={change('email')} required />
        </div>
        <div style={{marginBottom:10}}>
          <label>나이: </label>
          <input type="number" value={form.age} onChange={change('age')} />
        </div>
        <button type="submit">제출</button>
      </form>

{submitted && (
        <div style={{marginTop:20, padding:12, background:'#1e293b', borderRadius:8}}>
          <h3>✅ 제출됨:</h3>
          <pre>{JSON.stringify(submitted, null, 2)}</pre>
        </div>
      )}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);

⚛️ React 18 + Babel Standalone — 결과 먼저 확인 후 코드 편집기에서 직접 수정해볼 수 있습니다.

확인 퀴즈

제어 컴포넌트(Controlled Component)란?