React 폼 기본

소개

웹 개발에서 폼은 사용자 입력을 수집하는 데 필수적입니다. React 에서 폼 데이터를 처리하는 방식은 기존 HTML 과 약간 다릅니다. 권장되는 접근 방식은 "제어 컴포넌트 (controlled components)"라는 기술을 사용하는 것입니다.

제어 컴포넌트를 사용하면 폼의 데이터는 React 컴포넌트의 상태에 의해 관리됩니다. 이를 통해 React 상태가 "단일 진실 공급원 (single source of truth)"이 되어 사용자 입력을 예측 가능한 방식으로 관리, 유효성 검사 및 응답할 수 있습니다.

이 실습에서는 단일 텍스트 입력과 제출 버튼이 있는 간단한 폼을 구축합니다. 다음을 배우게 됩니다.

• JSX 에서 폼 요소를 생성하는 방법.
• useState 훅을 사용하여 입력 값 (value) 을 관리하는 방법.
• onChange 이벤트를 사용하여 사용자 입력을 처리하는 방법.
• onSubmit 이벤트를 사용하여 폼 제출을 처리하는 방법.

이 실습이 끝나면 React 폼의 기본 사항에 대한 확실한 이해를 갖게 될 것입니다.

onChange 속성을 가진 입력 요소 생성

이 단계에서는 폼의 기본 구조를 만드는 것부터 시작합니다. 여기에는 form 요소와 텍스트 입력 필드를 추가하는 것이 포함됩니다. 또한 입력 값의 변경 사항을 추적하는 데 중요한 onChange 속성을 추가할 것입니다.

먼저 개발 환경을 준비하겠습니다. 프로젝트 종속성을 설치하고 개발 서버를 시작해야 합니다.

WebIDE 에서 터미널을 열고 다음 명령을 하나씩 실행합니다. ~/project/my-app 디렉토리에 있는지 확인하십시오.

cd my-app
npm install

이 명령은 package.json에 정의된 모든 필요한 패키지를 설치합니다.

이제 개발 서버를 시작합니다.

npm run dev -- --host 0.0.0.0 --port 8080

다음으로, 왼쪽에 있는 파일 탐색기에서 my-app/src 디렉토리로 이동하여 App.jsx 파일을 엽니다. 이 파일을 수정하여 폼을 추가할 것입니다.

App.jsx의 내용을 다음 코드로 바꾸십시오. <form> 태그와 그 안에 <input> 요소를 추가하고 있습니다. onChange 속성은 입력에 추가되며, 나중에 값 변경을 처리하는 데 사용될 것입니다.

import "./App.css";

function App() {
  return (
    <form>
      <h1>React Form</h1>
      <label>
        Enter your name:
        <input type="text" onChange={() => {}} />
      </label>
    </form>
  );
}

export default App;

파일을 저장한 후 LabEx 인터페이스의 Web 8080 탭으로 전환하십시오. 텍스트 입력 필드가 있는 간단한 폼이 표시되어야 합니다. 변경 사항이 보이지 않으면 탭을 새로고침해 보십시오. 현재로서는 입력 필드에 입력해도 아무런 동작을 하지 않지만, 기본 구조는 갖추어졌습니다.

상태 업데이트 함수로 변경 처리

이 단계에서는 입력 필드를 상호작용 가능하게 만들 것입니다. 이를 위해 입력 필드의 값을 컴포넌트의 상태에 저장해야 합니다. useState 훅을 사용하여 상태 변수와 이를 업데이트하는 함수를 만들 것입니다.

먼저 'react' 라이브러리에서 useState 훅을 가져와야 합니다. 그런 다음 입력 값 (value) 을 저장할 name이라는 상태 변수를 선언할 것입니다.

다음으로 handleChange라는 함수를 만들 것입니다. 이 함수는 사용자가 입력 필드에 입력할 때마다 트리거됩니다. 이 함수 안에서 useState에서 제공하는 setName 함수를 사용하여 event.target.value를 통해 접근할 수 있는 입력의 현재 값으로 name 상태를 업데이트할 것입니다.

App.jsx 파일을 다음 코드로 업데이트하십시오.

import { useState } from "react";
import "./App.css";

function App() {
  // 'name' 상태 변수와 이를 업데이트하는 'setName' 함수 생성
  const [name, setName] = useState("");

  // 이벤트 핸들러 함수 정의
  const handleChange = (event) => {
    setName(event.target.value);
  };

  return (
    <form>
      <h1>React Form</h1>
      <label>
        Enter your name:
        {/* 핸들러를 onChange 이벤트에 연결 */}
        <input type="text" onChange={handleChange} />
      </label>
    </form>
  );
}

export default App;

이제 입력 필드에 입력하면 handleChange 함수가 호출되고, 입력할 때마다 name 상태가 업데이트됩니다. 아직 화면에서 변경 사항을 볼 수는 없지만, 컴포넌트의 상태는 이제 입력 값을 추적하고 있습니다. 이것이 제어 컴포넌트를 만드는 첫 번째 단계입니다.

입력 value 속성을 상태 값으로 설정

이 단계에서는 "제어 컴포넌트 (controlled component)" 패턴을 완성할 것입니다. 제어 컴포넌트는 입력 값 (input's value) 이 React 상태에 의해 결정되는 컴포넌트로, 상태가 "단일 진실 공급원 (single source of truth)"이 됩니다.

이를 달성하기 위해 <input> 요소의 value 속성을 name 상태 변수에 직접 바인딩해야 합니다. 이렇게 하면 양방향 데이터 바인딩이 생성됩니다.

1. 사용자가 입력하면 onChange가 트리거되어 상태가 업데이트됩니다.
2. 상태 업데이트로 인해 리렌더링이 발생하고, 입력의 value가 새로운 상태 값으로 설정됩니다.

이를 통해 UI 는 항상 컴포넌트의 상태와 동기화됩니다.

App.jsx 파일에서 <input> 요소를 수정하여 value 속성을 추가하십시오.

import { useState } from "react";
import "./App.css";

function App() {
  const [name, setName] = useState("");

  const handleChange = (event) => {
    setName(event.target.value);
  };

  return (
    <form>
      <h1>React Form</h1>
      <label>
        Enter your name:
        {/* 입력의 value 를 상태에 바인딩 */}
        <input type="text" value={name} onChange={handleChange} />
      </label>
    </form>
  );
}

export default App;

파일을 저장한 후 Web 8080 탭으로 돌아가십시오. 폼은 동일하게 보이지만, 이제 완전한 제어 컴포넌트가 되었습니다. 입력 필드의 표시는 이제 React 컴포넌트의 name 상태 변수에 의해 직접 제어됩니다.

onClick 핸들러가 있는 제출 버튼 추가

폼을 제출할 방법 없이는 폼이 완성되지 않습니다. 이 단계에서는 제출 버튼과 폼 제출을 처리할 이벤트 핸들러를 추가할 것입니다.

React 에서 폼 제출을 처리하는 표준적이고 가장 접근성 높은 방법은 <form> 요소 자체의 onSubmit 이벤트를 사용하는 것입니다. 이렇게 하면 버튼을 클릭하거나 입력 필드에서 "Enter" 키를 눌러 폼을 제출할 수 있습니다.

먼저 폼 안에 type="submit"인 <button>을 추가하겠습니다. 그런 다음 handleSubmit이라는 새 핸들러 함수를 만들고 이를 <form> 요소의 onSubmit 속성에 연결할 것입니다.

App.jsx 파일을 다음 코드로 업데이트하십시오.

import { useState } from "react";
import "./App.css";

function App() {
  const [name, setName] = useState("");

  const handleChange = (event) => {
    setName(event.target.value);
  };

  // 제출 핸들러 함수 생성
  const handleSubmit = (event) => {
    // 다음 단계에서 더 많은 로직을 추가할 것입니다.
    console.log("Form was submitted");
  };

  return (
    // 핸들러를 폼의 onSubmit 이벤트에 연결
    <form onSubmit={handleSubmit}>
      <h1>React Form</h1>
      <label>
        Enter your name:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      {/* 제출 버튼 추가 */}
      <button type="submit">Submit</button>
    </form>
  );
}

export default App;

이제 Web 8080 탭으로 가면 "Submit" 버튼이 보일 것입니다. 클릭하면 페이지가 빠르게 새로고침될 수 있습니다. 이것은 폼 제출에 대한 기본 브라우저 동작이며, 마지막 단계에서 이를 처리할 것입니다.

submit 기본 동작 방지 및 폼 데이터 로깅

이 마지막 단계에서는 폼의 기능을 완성할 것입니다. 눈치챘겠지만, 제출 버튼을 클릭하면 전체 페이지가 새로고침됩니다. React 로 구축된 것과 같은 단일 페이지 애플리케이션 (SPA) 에서는 페이지를 새로고침하지 않고 JavaScript 를 사용하여 폼 제출을 처리하고 싶을 것입니다.

이를 위해 handleSubmit 함수 내에서 event.preventDefault()를 호출해야 합니다. event 객체는 자동으로 이벤트 핸들러에 전달되며, 이 메서드는 브라우저의 기본 동작을 중지시킵니다.

기본 동작을 방지한 후에는 상태에서 제출된 데이터에 액세스하여 사용자에게 알림을 표시하는 등 원하는 작업을 수행할 수 있습니다.

이 로직을 구현하기 위해 App.jsx의 handleSubmit 함수를 업데이트해 보겠습니다.

import { useState } from "react";
import "./App.css";

function App() {
  const [name, setName] = useState("");

  const handleChange = (event) => {
    setName(event.target.value);
  };

  const handleSubmit = (event) => {
    // 기본 폼 제출 동작 방지
    event.preventDefault();
    // 제출된 이름으로 알림 표시
    alert(`A name was submitted: ${name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <h1>React Form</h1>
      <label>
        Enter your name:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default App;

파일을 저장하십시오. 이제 Web 8080 탭으로 가서 입력 필드에 이름을 입력하고 "Submit" 버튼을 클릭하십시오. 입력한 이름이 포함된 알림이 나타나고 페이지가 새로고침되지 않는 것을 볼 수 있습니다.

축하합니다! React 에서 기본적인 제어 폼을 성공적으로 구축했습니다.

요약

이 실습에서는 "제어 컴포넌트 (controlled components)" 패턴을 사용하여 React 에서 폼을 처리하는 기본 원리를 배웠습니다.

다음과 같은 작업을 성공적으로 수행했습니다.

• JSX 를 사용하여 입력 필드와 제출 버튼이 있는 폼을 생성했습니다.
• useState 훅을 사용하여 컴포넌트의 상태 내에서 폼 데이터를 관리했습니다.
• 사용자가 입력할 때 상태를 업데이트하여 UI 와 상태를 동기화하는 onChange 이벤트 핸들러를 구현했습니다.
• event.preventDefault()를 사용하여 브라우저의 기본 페이지 새로고침을 방지하는 onSubmit 이벤트 핸들러로 폼 제출을 처리했습니다.
• 제출 시 상태에서 폼 데이터에 액세스했습니다.

이러한 개념은 React 애플리케이션에서 더 복잡하고 상호작용적인 폼을 만드는 데 필요한 기본 요소입니다. 이제 이 지식을 활용하여 여러 입력, 다양한 입력 유형 및 유효성 검사 로직을 갖춘 폼을 구축할 수 있습니다.