복합 폼 상태 관리
여러 입력과 필드 간 의존성을 useReducer와 커스텀 훅으로 구조화하고 폼 라이브러리가 필요한 기준을 판단합니다.
이번에는 더 복잡한 폼 상태를 효과적으로 관리하는 방법을 다룹니다.
폼 필드가 많아지거나 필드 간 상호 의존성이 생기면, 단순한 useState만으로는 관리가 어려워질 수 있습니다.
이럴 때 유용한 몇 가지 패턴과 훅을 살펴보겠습니다.
다수의 입력 필드 관리 패턴 다시 보기
지난 장에서 잠깐 다루었지만, 여러 개의 input 필드를 하나의 useState 객체로 관리하는 패턴은 복잡한 폼 관리에 있어 첫걸음입니다.
import React, { useState } from 'react';
function MultipleInputsForm() {
const [formData, setFormData] = useState({
firstName: '',
lastName: '',
email: '',
password: '',
confirmPassword: '',
newsletter: false,
country: 'USA',
});
const handleChange = (e) => {
const { name, value, type, checked } = e.target;
// 체크박스와 같은 특정 타입의 입력은 `checked` 속성을 사용
setFormData(prevData => ({
...prevData,
[name]: type === 'checkbox' ? checked : value,
}));
};
const handleSubmit = (e) => {
e.preventDefault();
console.log('Form Submitted:', formData);
alert('폼 데이터: ' + JSON.stringify(formData, null, 2));
};
return (
<div style={{ maxWidth: '600px', margin: '30px auto', padding: '25px', border: '1px solid #ddd', borderRadius: '8px', boxShadow: '0 2px 10px rgba(0,0,0,0.05)', backgroundColor: '#fff' }}>
<h2 style={{ textAlign: 'center', color: '#2c3e50', marginBottom: '30px' }}>다수의 입력 필드 폼</h2>
<form onSubmit={handleSubmit}>
{/* 일반 텍스트 입력 */}
<div style={{ marginBottom: '15px' }}>
<label style={{ display: 'block', marginBottom: '5px' }}>First Name:</label>
<input type="text" name="firstName" value={formData.firstName} onChange={handleChange} style={{ width: '100%', padding: '8px' }} />
</div>
<div style={{ marginBottom: '15px' }}>
<label style={{ display: 'block', marginBottom: '5px' }}>Last Name:</label>
<input type="text" name="lastName" value={formData.lastName} onChange={handleChange} style={{ width: '100%', padding: '8px' }} />
</div>
<div style={{ marginBottom: '15px' }}>
<label style={{ display: 'block', marginBottom: '5px' }}>Email:</label>
<input type="email" name="email" value={formData.email} onChange={handleChange} style={{ width: '100%', padding: '8px' }} />
</div>
{/* 비밀번호 입력 */}
<div style={{ marginBottom: '15px' }}>
<label style={{ display: 'block', marginBottom: '5px' }}>Password:</label>
<input type="password" name="password" value={formData.password} onChange={handleChange} style={{ width: '100%', padding: '8px' }} />
</div>
<div style={{ marginBottom: '15px' }}>
<label style={{ display: 'block', marginBottom: '5px' }}>Confirm Password:</label>
<input type="password" name="confirmPassword" value={formData.confirmPassword} onChange={handleChange} style={{ width: '100%', padding: '8px' }} />
</div>
{/* 체크박스 */}
<div style={{ marginBottom: '15px' }}>
<input type="checkbox" id="newsletter" name="newsletter" checked={formData.newsletter} onChange={handleChange} style={{ marginRight: '8px' }} />
<label htmlFor="newsletter">Subscribe to Newsletter</label>
</div>
{/* Select 박스 */}
<div style={{ marginBottom: '20px' }}>
<label style={{ display: 'block', marginBottom: '5px' }}>Country:</label>
<select name="country" value={formData.country} onChange={handleChange} style={{ width: '100%', padding: '8px' }}>
<option value="USA">United States</option>
<option value="Canada">Canada</option>
<option value="UK">United Kingdom</option>
<option value="Korea">South Korea</option>
</select>
</div>
<button type="submit" className="button" style={{ width: '100%', padding: '10px' }}>Submit</button>
</form>
</div>
);
}
export default MultipleInputsForm;이 패턴은 대부분의 경우에 잘 작동하지만, 폼 필드가 매우 많아지거나, 필드마다 복잡한 유효성 검사 로직이 필요해지면 handleChange 함수가 비대해지고, 컴포넌트 자체가 복잡해질 수 있습니다.
useReducer를 이용한 폼 상태 관리
useState 대신 useReducer 훅을 사용하면 여러 개의 상태 업데이트 로직을 한 곳에 모아 관리할 수 있습니다.
이는 특히 상태 전이(state transitions)가 복잡하거나, 다음 상태가 이전 상태에 의존하는 경우에 유용합니다.
폼 상태 관리는 이러한 경우에 해당할 수 있습니다.
useReducer의 장점
- 상태 로직 중앙 집중화: 모든 상태 업데이트 로직이 리듀서 함수 내에 존재하므로, 관련 로직을 한눈에 파악하기 쉽습니다.
- 복잡한 상태 전이 관리: 여러 필드의 유효성 검사나 종속적인 필드 업데이트 등 복잡한 상태 변화를 깔끔하게 처리할 수 있습니다.
- 성능 최적화:
dispatch함수는 한 번 생성되면 변하지 않으므로, 자식 컴포넌트에dispatch를 넘겨줄 때useCallback등으로 감쌀 필요가 없어 성능 최적화에 도움이 될 수 있습니다.
import React, { useReducer } from 'react';
// 폼 상태를 관리할 리듀서 함수
function formReducer(state, action) {
switch (action.type) {
case 'CHANGE_VALUE':
return {
...state,
[action.field]: action.value,
// 필드마다 유효성 검사 로직을 리듀서 내부에 추가할 수도 있습니다.
// 예를 들어: email 필드에 대한 유효성 검사
// emailError: action.field === 'email' && !action.value.includes('@') ? '유효하지 않은 이메일' : '',
};
case 'RESET_FORM':
return action.initialState; // 초기 상태로 리셋
case 'SET_ERRORS': // 유효성 검사 오류를 설정하는 액션
return {
...state,
errors: action.errors,
};
default:
return state;
}
}
const initialFormState = {
username: '',
password: '',
comment: '',
rememberMe: false,
errors: {}, // 에러 상태도 여기에 포함
};
function ReducerForm() {
const [formState, dispatch] = useReducer(formReducer, initialFormState);
const handleChange = (e) => {
const { name, value, type, checked } = e.target;
dispatch({
type: 'CHANGE_VALUE',
field: name,
value: type === 'checkbox' ? checked : value,
});
};
const validateForm = () => {
const newErrors = {};
if (!formState.username.trim()) {
newErrors.username = '사용자 이름을 입력해주세요.';
}
if (formState.password.length < 6) {
newErrors.password = '비밀번호는 6자 이상이어야 합니다.';
}
// 추가적인 유효성 검사 규칙...
dispatch({ type: 'SET_ERRORS', errors: newErrors });
return Object.keys(newErrors).length === 0; // 에러가 없으면 true 반환
};
const handleSubmit = (e) => {
e.preventDefault();
if (validateForm()) {
console.log('폼 제출됨 (useReducer):', formState);
alert('폼 데이터: ' + JSON.stringify(formState, null, 2));
dispatch({ type: 'RESET_FORM', initialState: initialFormState }); // 제출 후 폼 리셋
} else {
console.log('유효성 검사 실패:', formState.errors);
alert('폼 입력값을 확인해주세요.');
}
};
return (
<div style={{ maxWidth: '600px', margin: '30px auto', padding: '25px', border: '1px solid #ddd', borderRadius: '8px', boxShadow: '0 2px 10px rgba(0,0,0,0.05)', backgroundColor: '#fff' }}>
<h2 style={{ textAlign: 'center', color: '#2c3e50', marginBottom: '30px' }}>`useReducer`를 이용한 폼</h2>
<form onSubmit={handleSubmit}>
<div style={{ marginBottom: '15px' }}>
<label style={{ display: 'block', marginBottom: '5px' }}>사용자 이름:</label>
<input type="text" name="username" value={formState.username} onChange={handleChange} style={{ width: '100%', padding: '8px', border: formState.errors.username ? '1px solid red' : '1px solid #ccc' }} />
{formState.errors.username && <p style={{ color: 'red', fontSize: '0.8em', marginTop: '5px' }}>{formState.errors.username}</p>}
</div>
<div style={{ marginBottom: '15px' }}>
<label style={{ display: 'block', marginBottom: '5px' }}>비밀번호:</label>
<input type="password" name="password" value={formState.password} onChange={handleChange} style={{ width: '100%', padding: '8px', border: formState.errors.password ? '1px solid red' : '1px solid #ccc' }} />
{formState.errors.password && <p style={{ color: 'red', fontSize: '0.8em', marginTop: '5px' }}>{formState.errors.password}</p>}
</div>
<div style={{ marginBottom: '15px' }}>
<label style={{ display: 'block', marginBottom: '5px' }}>코멘트:</label>
<textarea name="comment" value={formState.comment} onChange={handleChange} rows="4" style={{ width: '100%', padding: '8px', border: '1px solid #ccc' }} />
</div>
<div style={{ marginBottom: '20px' }}>
<input type="checkbox" id="rememberMe" name="rememberMe" checked={formState.rememberMe} onChange={handleChange} style={{ marginRight: '8px' }} />
<label htmlFor="rememberMe">로그인 정보 저장</label>
</div>
<button type="submit" className="button" style={{ width: '100%', padding: '10px' }}>Submit</button>
</form>
</div>
);
}
export default ReducerForm;useReducer를 사용하면 폼의 상태 변화 로직과 유효성 검사 로직을 리듀서 함수 내에 통합하여 관리할 수 있습니다.
이는 폼이 커질수록 코드의 응집성을 높여줍니다.