Ch.12 React 상태 관리 — 살아 움직이는 UI

이벤트와 폼 처리

React에서 이벤트 핸들러를 작성하고 연결할 수 있다Controlled Input 패턴으로 폼 데이터를 관리할 수 있다폼 제출 이벤트를 처리하고 기본 동작을 방지할 수 있다

onClick은 알겠는데 input 값은 어떻게?

Ch7에서 HTML 폼을 배웠죠? React에서는 폼 데이터를 state로 관리합니다.

사용자 입력을 실시간으로 추적하려면?

Controlled Component — input의 값을 state로 제어하여 React가 모든 데이터를 관리하게 합니다.

article

핵심 내용

React 이벤트는 camelCase로 작성하고 함수 자체를 전달합니다

import { useState } from "react";

function EventDemo() {
  const [message, setMessage] = useState("아직 아무 일도 없음");

  // 이벤트 핸들러 함수
  const handleClick = () => {
    setMessage("버튼이 클릭되었습니다!");
  };

  const handleMouseEnter = () => {
    setMessage("마우스가 올라왔습니다!");
  };

  const handleDoubleClick = () => {
    setMessage("더블클릭 감지!");
  };

  return (
    <div>
      <p>{message}</p>
      <button onClick={handleClick}>클릭</button>
      <button onMouseEnter={handleMouseEnter}>호버</button>
      <button onDoubleClick={handleDoubleClick}>더블클릭</button>
    </div>
  );
}

React 이벤트 주의사항 ✅ `onClick={handleClick}` — 함수 참조를 전달 ❌ `onClick={handleClick()}` — 함수를 즉시 실행 (렌더링 시 바로 호출됨!) 인자를 전달하려면: `onClick={() => handleClick(id)}` — 화살표 함수로 감싸기

input의 value를 state로 제어하면 입력값을 완벽하게 관리할 수 있습니다

import { useState } from "react";

function SearchBar() {
  const [query, setQuery] = useState("");

  const handleChange = (e) => {
    setQuery(e.target.value);
  };

  return (
    <div>
      <input
        type="text"
        value={query}        // state가 input의 값을 제어
        onChange={handleChange} // 타이핑할 때마다 state 업데이트
        placeholder="검색어 입력..."
      />
      <p>현재 입력: {query}</p>
      <p>글자 수: {query.length}</p>
    </div>
  );
}

사용자 타이핑: 키보드로 문자 입력

onChange 발생: e.target.value에 새 값이 담김

setState 호출: setQuery(e.target.value)로 state 업데이트

리렌더링: input의 value가 새 state로 표시

왜 Controlled Component를 사용할까? 1. 입력값 검증: 실시간으로 유효성 검사 가능 (예: 비밀번호 강도) 2. 입력 제한: 숫자만 허용, 최대 길이 제한 등 3. 실시간 검색: 타이핑할 때마다 검색 결과 필터링 4. 다른 UI와 동기화: 미리보기, 글자 수 표시 등

form의 onSubmit에서 preventDefault로 기본 동작을 막습니다

import { useState } from "react";

function LoginForm() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault(); // 페이지 새로고침 방지!

    // 유효성 검사
    if (!email.includes("@")) {
      setError("올바른 이메일을 입력하세요");
      return;
    }
    if (password.length < 6) {
      setError("비밀번호는 6자 이상이어야 합니다");
      return;
    }

    setError("");
    console.log("로그인 시도:", { email, password });
    // API 호출...
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="이메일"
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="비밀번호"
      />
      {error && <p className="error">{error}</p>}
      <button type="submit">로그인</button>
    </form>
  );
}

폼 처리 핵심 3단계 1. `e.preventDefault()` — 기본 폼 제출(페이지 새로고침) 방지 2. 유효성 검사 — 입력값이 올바른지 확인 3. 데이터 전송 — API 호출 또는 상태 업데이트 각 input의 value와 onChange를 state에 연결하는 것이 Controlled Form 패턴입니다.

React에서 input의 value를 state로 관리하는 패턴을 무엇이라 하나?

React에서 onClick={handleClick()}으로 이벤트를 연결하면 클릭 시에만 실행된다

form 제출 시 페이지 새로고침을 방지하려면 ___ 를 호출한다

이벤트와 폼 처리 클리어!

edit_note

정리 노트

React 이벤트와 폼 처리 정리

React 이벤트

onClick / onChange: JSX에서 카멜케이스로 이벤트 핸들러 연결
합성 이벤트: React가 브라우저 이벤트를 래핑하여 일관된 API 제공
핸들러 함수: const handleClick = (e) => { ... } — 함수 참조를 전달

Controlled Input

value + onChange: input의 value를 state로 제어 — 양방향 바인딩
폼 제출: onSubmit + e.preventDefault()로 새로고침 방지
다중 입력: name 속성 활용하여 하나의 핸들러로 여러 input 관리

★

Controlled Input은 React가 폼 데이터의 '단일 진실 공급원'이 되는 패턴입니다.

check_circle

핵심 정리

1React 이벤트는 camelCase, 함수 참조를 전달 (괄호 붙이지 않기!)
2Controlled Component = value + onChange + state 연결
3폼 제출: onSubmit + e.preventDefault() + 유효성 검사

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작