폼과 Controlled Components
Controlled components, uncontrolled components, 폼 유효성 검사, React Hook Form, submit 처리
1React에서 controlled component란 무엇인가요?
React에서 controlled component란 무엇인가요?
답변
Controlled component는 value prop과 onChange 핸들러를 통해 React state로 값이 관리되는 폼 요소입니다. 이는 React가 해당 데이터의 단일 진실 공급원이 된다는 것을 의미합니다. DOM이 자체 값을 유지하는 uncontrolled components와 달리, controlled components는 폼 데이터를 완전히 제어할 수 있고 실시간 유효성 검사를 용이하게 합니다.
2React에서 controlled input을 어떻게 만드나요?
React에서 controlled input을 어떻게 만드나요?
답변
Controlled input에는 두 가지 필수 요소가 필요합니다: React state에 바인딩된 value prop과 해당 state를 업데이트하는 onChange 핸들러입니다. onChange가 없으면 React가 모든 수정을 방지하므로 input은 읽기 전용이 됩니다. 이 접근 방식은 React state가 표시된 input 값과 동기화된 상태를 유지하도록 보장하여 즉각적인 유효성 검사나 데이터 변환을 가능하게 합니다.
3Controlled component와 uncontrolled component의 차이점은 무엇인가요?
Controlled component와 uncontrolled component의 차이점은 무엇인가요?
답변
근본적인 차이는 데이터의 진실 공급원에 있습니다. Controlled component는 값을 React state(단일 진실 공급원)에 저장하는 반면, uncontrolled component는 DOM이 자체 값을 관리하도록 하며 ref를 통해 접근합니다. Controlled components는 더 많은 제어를 제공하고 실시간 유효성 검사를 용이하게 하지만, uncontrolled components는 복잡한 유효성 검사가 없는 기본 폼에서는 더 간단할 수 있습니다.
같은 폼에서 여러 개의 controlled input을 어떻게 관리하나요?
React에서 controlled checkbox를 어떻게 만드나요?
+17 면접 질문