ReactJS - Form Programming

안녕하세요, 야심 찬 프로그래머 여러분! 오늘 우리는 ReactJS에서 폼 프로그래밍의 흥미로운 세계로 뛰어들어 보겠습니다. 여러분의 친절한 이웃 컴퓨터 과학 교사로서, 이 여정을 단계별로 안내해 드리겠습니다. 그러니 커피 한 잔 (또는 여러분의 좋아하는 음료)을 들고, 시작해 보세요!

ReactJS에서 폼은 무엇인가요?

코드로 뛰어들기 전에, 폼이 무엇이고 왜 중요한지 이해해 보겠습니다. 폼은 웹 애플리케이션에서 사용자 입력의 게이트keeper입니다. 사용자가 우리 앱과 상호작용하여 정보를 제공하게 하고, 그 정보를 처리하고 사용할 수 있게 합니다. React에서 폼은 자신의 상태를 유지하는 것이 특별합니다. 이는 우리가 다른 요소들과는 다른 방식으로 처리해야 한다는 것을 의미합니다.

폼 처리의 기본

간단한 폼 예제로 시작해 보겠습니다:

import React, { useState } from 'react';

function SimpleForm() {
const [name, setName] = useState('');

const handleSubmit = (event) => {
event.preventDefault();
alert('제출된 이름: ' + name);
}

return (
<form onSubmit={handleSubmit}>
<label>
이름:
<input type="text" value={name} onChange={e => setName(e.target.value)} />
</label>
<input type="submit" value="제출" />
</form>
);
}

이를 하나씩 풀어보겠습니다:

useState를 import하여 폼 상태를 관리합니다.
상태 변수 name과 함수 setName을 만들어 상태를 업데이트합니다.
handleSubmit 함수는 기본 폼 제출을 방지하고 제출된 이름을 알릿으로 보여줍니다.
폼에서 value를 name 상태로 설정하고 onChange를 사용하여 입력이 변경될 때 상태를 업데이트합니다.

이것이 React에서 폼 처리의 핵심입니다. 우리는 React으로 폼의 상태를 제어하고 있으므로, 이를 "제어된 컴포넌트"라고 부릅니다.

여러 입력 항목 처리

그렇다면 여러 입력 항목이 있는 경우는 어떨까요? 각각의 입력에 대해 별도의 상태를 생성해야 하나요? 꼭 그렇지는 않습니다! 더 복잡한 폼을 보겠습니다:

import React, { useState } from 'react';

function MultipleInputForm() {
const [formData, setFormData] = useState({
firstName: '',
lastName: '',
email: ''
});

const handleChange = (event) => {
const { name, value } = event.target;
setFormData(prevState => ({
...prevState,
[name]: value
}));
}

const handleSubmit = (event) => {
event.preventDefault();
console.log('폼 제출:', formData);
}

return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="firstName"
value={formData.firstName}
onChange={handleChange}
placeholder="이름"
/>
<input
type="text"
name="lastName"
value={formData.lastName}
onChange={handleChange}
placeholder="성"
/>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
placeholder="이메일"
/>
<button type="submit">제출</button>
</form>
);
}

이 예제에서는 단일 상태 객체를 사용하여 모든 폼 필드를 관리하고 있습니다. handleChange 함수는 입력의 name 속성을 사용하여 상태에서 올바른 필드를 업데이트합니다. 이 접근 방식은 폼이 커질수록 잘 작동합니다.

다양한 입력 유형 처리

폼은 텍스트 입력만으로 구성되지 않습니다. 다양한 입력 유형을 어떻게 처리할 수 있는지 보겠습니다:

import React, { useState } from 'react';

function DiverseForm() {
const [formData, setFormData] = useState({
name: '',
age: '',
gender: '',
isStudent: false,
favoriteColor: 'blue'
});

const handleChange = (event) => {
const { name, value, type, checked } = event.target;
setFormData(prevState => ({
...prevState,
[name]: type === 'checkbox' ? checked : value
}));
}

const handleSubmit = (event) => {
event.preventDefault();
console.log('폼 제출:', formData);
}

return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
placeholder="이름"
/>
<input
type="number"
name="age"
value={formData.age}
onChange={handleChange}
placeholder="나이"
/>
<select name="gender" value={formData.gender} onChange={handleChange}>
<option value="">성별 선택</option>
<option value="male">남성</option>
<option value="female">여성</option>
<option value="other">기타</option>
</select>
<label>
<input
type="checkbox"
name="isStudent"
checked={formData.isStudent}
onChange={handleChange}
/>
학생이신가요?
</label>
<fieldset>
<legend>좋아하는 색상</legend>
<label>
<input
type="radio"
name="favoriteColor"
value="red"
checked={formData.favoriteColor === 'red'}
onChange={handleChange}
/>
빨간색
</label>
<label>
<input
type="radio"
name="favoriteColor"
value="blue"
checked={formData.favoriteColor === 'blue'}
onChange={handleChange}
/>
파란색
</label>
<label>
<input
type="radio"
name="favoriteColor"
value="green"
checked={formData.favoriteColor === 'green'}
onChange={handleChange}
/>
초록색
</label>
</fieldset>
<button type="submit">제출</button>
</form>
);
}

이 폼은 다양한 입력 유형을 처리하는 예제입니다: 텍스트, 숫자, 선택, 체크박스, 라디오 버튼. handleChange 함수는 입력 유형을 확인하고 상태를 업데이트합니다.

폼 검증

폼은 검증 없이는 완벽하지 않습니다. 우리는 폼에 기본 검증을 추가해 보겠습니다:

import React, { useState } from 'react';

function ValidatedForm() {
const [formData, setFormData] = useState({
username: '',
email: '',
password: ''
});

const [errors, setErrors] = useState({});

const handleChange = (event) => {
const { name, value } = event.target;
setFormData(prevState => ({
...prevState,
[name]: value
}));
}

const validateForm = () => {
let newErrors = {};
if (!formData.username) newErrors.username = '사용자 이름은 필수입니다';
if (!formData.email) {
newErrors.email = '이메일은 필수입니다';
} else if (!/\S+@\S+\.\S+/.test(formData.email)) {
newErrors.email = '이메일이 유효하지 않습니다';
}
if (!formData.password) {
newErrors.password = '비밀번호는 필수입니다';
} else if (formData.password.length < 6) {
newErrors.password = '비밀번호는 최소 6자리이어야 합니다';
}
return newErrors;
}

const handleSubmit = (event) => {
event.preventDefault();
const newErrors = validateForm();
if (Object.keys(newErrors).length > 0) {
setErrors(newErrors);
} else {
console.log('폼 제출:', formData);
// 여기서 데이터를 서버로 전송하는 작업을 수행합니다
}
}

return (
<form onSubmit={handleSubmit}>
<div>
<input
type="text"
name="username"
value={formData.username}
onChange={handleChange}
placeholder="사용자 이름"
/>
{errors.username && <span className="error">{errors.username}</span>}
</div>
<div>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
placeholder="이메일"
/>
{errors.email && <span className="error">{errors.email}</span>}
</div>
<div>
<input
type="password"
name="password"
value={formData.password}
onChange={handleChange}
placeholder="비밀번호"
/>
{errors.password && <span className="error">{errors.password}</span>}
</div>
<button type="submit">제출</button>
</form>
);
}

이 예제에서는 validateForm 함수를 사용하여 빈 필드와 이메일 형식, 비밀번호 길이를 검증합니다. 검증된 오류를 별도의 상태 객체에 저장하고, 해당 오류를 관련 입력 필드 아래에 표시합니다.

결론

이제 React에서 폼 처리의 기본에서 복잡한 폼에 이르기까지 다루었습니다. 실습을 통해 완벽을 추구하세요. 여러분의 폼을 만들어 보세요, 다양한 입력 유형을 실험해 보세요, 실수를 두려워하지 마세요 - 그게 우리가 배우는 방법입니다!

여기서 사용한 방법의 빠른 참조 표입니다:

방법	목적
useState	기능 컴포넌트에서 상태를 생성하고 관리합니다
onChange	폼 입력의 변경을 처리합니다
onSubmit	폼 제출을 처리합니다
preventDefault	기본 폼 제출 동작을 방지합니다

행복하게 코딩하세요, 여러분의 폼이 항상 사용자 친화적이고 버그가 없기를 바랍니다!

Credits: Image by storyset

이전 튜토리얼:

ReactJS - HTTP 클라이언트 프로그래밍

다음 튜토리얼:

ReactJS - 제어 컴포넌트