[ReactJS] 6장 폼

1. 폼 컴포넌트 생성

리액트에서 폼을 처리하는 방법으로 사용자 이름과 이메일을 입력받는 폼을 만들고 그 안에 상태 관리와 이벤트 처리를 통한 입력값을 처리하는 방법을 알아보겠습니다. src 안에 Form.js 파일을 생성해 아래 코드를 작성합니다.

import React, { useState } from 'react';

export const Form = () => {
  // 상태 관리
  const [formData, setFormData] = useState({
    username: '',
    email: '',
  });

  // 입력값 변경 핸들러
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value,
    });
  };

  // 폼 제출 핸들러
  const handleSubmit = (e) => {
    e.preventDefault(); // 기본 제출 동작 방지
    console.log('Submitted Data: ', formData);
  };

  return (
    // 상태관리
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="username">Username:</label>
        <input
          type="text"
          id="username"
          name="username"
          value={formData.username}
          onChange={handleChange}
          required
        />
      </div>
      <div>
        <label htmlFor="email">Email:</label>
        <input
          type="text"
          id="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
          required
        />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

---

2.App 컴포넌트 수정

src/App.js 파일을 수정해 Form 컴포넌트를 포함합니다.

import { Form } from './5.Form';
import './App.css';
import React from 'react';

export const ReactApp = () => {
  return (
    <div>
      <Form />
    </div>
  );
};

export default ReactApp;

---

3.스타일 수정

form {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  height: 100vh;
  align-items: center;
  justify-content: center;
}
div {
  margin-bottom: 20px;
}

input {
  padding: 5px;
  margin-left: 10px;
}

input {
  outline: none;
}

 

서버를 실행하고 폼에 데이터를 입력후 Submit 버튼을 클릭 후 콘솔 창을 열면 입력된 데이터가 출력됩니다.

---

요약

• 리액트에서 폼을 처리하기 위해 상태 관리(useState)를 사용해 입력값 관리
• onChange 이벤트를 통해 입력값을 업데이트하고, onSubmit 이벤트로 폼 제출을 처리

GitHub - Koras02/react-bloging: https://thinky.tistory.com/category/Front-End/ReactJS