React에서 폼을 다루는 방법은 무엇인가요?
_____A1: React에서는 폼 요소를 제어 컴포넌트(Controlled Components)로 다루는 것이 일반적입니다. 이는 폼의 입력값을 컴포넌트의 상태(state)에 저장하고, input, textarea, select 등의 값을 상태와 연동하여 관리하는 방식입니다. 이렇게 하면 입력값 변경 시 상태를 업데이트하고, 상태를 통해 입력값을 렌더링하여 폼 데이터를 쉽게 제어할 수 있습니다.
Q2: 제어 컴포넌트(Controlled Components)란 무엇인가요?
A2: 제어 컴포넌트는 폼 요소의 값을 React 컴포넌트의 state에 저장하고, 사용자가 입력할 때마다 onChange 이벤트를 통해 상태를 업데이트하는 방식입니다. 즉, input의 value 속성이 컴포넌트 상태에 의해 제어되고, 상태가 변경되면 input의 값도 갱신됩니다.
Q3: 비제어 컴포넌트(Uncontrolled Components)는 무엇인가요?
A3: 비제어 컴포넌트는 React가 아닌 DOM 자체가 폼 입력값을 관리하는 방식으로, React 상태 대신 ref를 사용해 직접 DOM 노드에 접근하여 값을 읽습니다. 주로 간단한 폼이나 외부 라이브러리와 함께 쓸 때 활용합니다.
Q4: 폼 입력값 상태를 관리할 때 어떻게 하나요?
A4: useState 훅을 사용해 입력값을 상태로 선언합니다. 예를 들어:
```jsx
const [name, setName] = useState('');
setName(e.target.value)} />
```
이처럼 onChange 이벤트 핸들러에서 상태를 업데이트하면 됩니다.
Q5: 여러 입력값을 가진 폼은 어떻게 상태를 관리해야 하나요?
A5: 하나의 useState에 객체로 여러 입력값을 관리하거나, 개별 useState를 여러 개 사용하는 방법이 있습니다. 객체 상태를 사용할 경우 사본을 만들어서 업데이트하는 것이 중요합니다. 예:
```jsx
const [formData, setFormData] = useState({ username: '', email: '' });
const handleChange = e => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
```
A6: form 태그의 onSubmit 이벤트에 핸들러 함수를 등록하고, 이벤트 객체의 preventDefault() 호출로 기본 제출 동작(페이지 새로고침)을 막은 뒤 상태를 처리하거나 API 호출 등을 수행합니다. 예:
```jsx
const handleSubmit = e => {
e.preventDefault();
// 폼 데이터 처리 로직
};
```
Q7: React에서 폼 유효성 검사는 어떻게 하나요?
A7: 가장 기본은 상태에 따라 조건부로 에러 메시지를 렌더링하거나, HTML의 내장 폼 속성(required, pattern 등)을 활용할 수 있습니다. 더 복잡한 경우 Formik, React Hook Form 같은 라이브러리를 사용해 체계적으로 유효성 검사를 관리합니다.
Q8: React Hook Form이란 무엇인가요?
A8: React Hook Form은 React 폼 관리를 간편하게 해주는 라이브러리로, 리렌더링 성능 최적화와 간단한 API, 내장된 유효성 검사 지원 등이 특징입니다. 상태 관리와 검증 로직을 간결하게 할 수 있어 대규모 폼에서 많이 사용됩니다.
Q9: select, checkbox, radio 등의 입력도 제어 컴포넌트로 다를 수 있나요?
A9: 네, 각각 value, checked 속성을 상태와 연동해야 합니다. 예를 들어 checkbox는 checked={isChecked} 형태로 상태를 제어하며, radio 버튼은 같은 name을 공유하고 checked 상태를 여러 개 중 하나로 관리합니다.
Q10: 폼을 초기화하려면 어떻게 하나요?
A10: 상태를 폼 초기값으로 설정하고, 제출이나 초기화 버튼 클릭 시 상태를 초기값으로 재설정하면 됩니다. 예:
```jsx
const initialForm = { name: '', email: '' };
const [formData, setFormData] = useState(initialForm);
const resetForm = () => setFormData(initialForm);
```
요약: React 폼 관리는 주로 제어 컴포넌트 방식을 사용하여 상태와 입력값을 동기화하며, onChange와 onSubmit 이벤트를 통해 상태 업데이트와 제출 이벤트를 처리합니다. 복잡한 유효성 검사와 상태 관리가 필요하면 React Hook Form 같은 라이브러리 활용도 권장됩니다.
React는 컴포넌트 기반의 라이브러리이기 때문에, 폼을 구성하는 각 요소를 컴포넌트로 나누어 관리할 수 있습니다.
아래에서는 React에서 폼을 다루는 기본적인 방법과 몇 가지 고급 기법에 대해 설명하겠습니다.
1. 기본적인 폼 구성 React에서 폼을 구성할 때는 일반적으로 `
