728x90 300x250 SMALL Front-end/React115 제어 컴포넌트 vs 비제어 컴포넌트 제어 컴포넌트(React가 값 관리)function App() { const [text, setText] = useState(""); const handleChange = (e) => setText(e.target.value); return ;}React 상태(text)가 값을 완전히 제어사용자가 입력할 때마다 상태가 업데이트되어야만 값이 변경됨비제어 컴포넌트(DOM이 값 관리):function App() { return ;}입력값은 DOM에서만 관리되며 React는 관여하지 않음사용자가 값을 자유롭게 입력 가능 제어 컴포넌트비제어 컴포넌트데이터 관리리액트 state로 데이터 관리DOM에서 직접 데이터 관리유효성 검사쉽게 구현 가능추가 코드 작성 필요코드 복잡성복잡할 수 있음간단한 폼에 적합특수.. 2025. 2. 1. React의 제어 컴포넌트란? React의 제어 컴포넌트란?입력필드의 값을 React의 상태(state)로 완전히 제어하는 컴포넌트를 말한다. 입력값은 DOM이 아니라 React 상태를 통해 관리되며, 상태가 value 속성으로 입력 필드에 전달된다. 동작 원리React에서 의 value는 React 상태에 의해 결정된다.React는 매 렌더링마다 value 속성을 DOM에 전달하여 DOM의 값을 덮어쓴다.사용자가 입력을 변경하더라도 React는 상태를 업데이트하지 않으면, 렌더링 후 값은 여전히 상태에 정의된 값으로 유지된다.function App() { const [text, setText] = React.useState("안녕하세요"); return ;} 이 경우, value 속성은 항상 text 상태의 값("안녕하세요")으.. 2025. 1. 31. React에서 value 설정하고도 입력이 가능하게 만드는 방법 1. value 속성의 역할React에서 이나 에 value 속성을 설정하면 해당 입력 필드는 제어 컴포넌트가 된다.즉, value가 React 상태에 의해 고정되므로, 사용자가 직접 입력해도 그 값이 없데이트되지 않는다.입력 값을 바꾸려면 React 상태를 업데이트해야만 변경된다.function App() { return } 이 경우 입력 필드의 값은 "고정 값"으로 고정된다.사용자가 입력을 시도해도 값이 절대로 바뀌지 않는다.2. 자유롭게 입력 가능하게 만들려면?만약 입력값을 사용자에게 자유롭게 입력하도록 허용하면서도 value를 유지하고 싶다면 다음 방법이 있다. undefined 또는 null을 value로 설정function App() { return ;} 동작 원리value가 undefined.. 2025. 1. 30. React에서 체크박스를 포함한 다중 입력 폼 구현하기 예제 코드import React, { useState } from "react";function MultiInputForm() { // 초기 상태 설정 const [formData, setFormData] = useState({ username: "", email: "", agreeToTerms: false, // 체크박스 상태 }); // 입력 값 변경 핸들러 const handleChange = (e) => { const { name, value, type, checked } = e.target; // e.target에서 필요한 값 추출 setFormData({ ...formData, // 기존 값 복사 [name]: type === "checkb.. 2025. 1. 29. 이전 1 ··· 6 7 8 9 10 11 12 ··· 29 다음 728x90 반응형 LIST