728x90 300x250 SMALL useState3 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. React useState로 다중 입력 폼 : onChange 핸들러 활용 리액트에서 하나의 컴포넌트 안에 여러 개의 입력 필드를 다루는 방법은 제어 컴포넌트(Control Components)와 상태(State)를 사용하는 것이다. 각각의 입력 필드 값을 독립적으로 관리하면서 하나의 onChange이벤트 핸들러를 통해 처리할 수 있다. 사용예제import React, { useState } from 'react';function MultiInputForm() { // 상태를 객체 형태로 관리 const [formData, setFormData] = useState({ username: '', email: '', password: '' }); // 입력값 변경 시 호출되는 함수 (공통 핸들러) const handleChange = (e) => { .. 2025. 1. 28. React로 체크박스 상태에 따라 화면 출력하기 체크박스를 클릭하면 상태가 변경되고, 그 상태에 따라 화면에 "체크됨" 또는 "체크 안됨"을 출력하기 코드 설명1. useState로 상태 선언checked라는 상태 변수와 이를 업데이트하는 setChecked 함수 생성2. onChange 이벤트 핸들러체크박스의 체크 상태를 감지하고 상태를 업데이트3. 출력체크 상태에 따라 조건부 렌더링으로 "체크됨" 또는 "체크 안 됨" 표시 사용예시function CheckboxExample() { const [checked, setChecked] = useState(false); const handleChange = (e) => setChecked(e.target.checked); return ( 체크박스 .. 2025. 1. 20. 이전 1 다음 728x90 반응형 LIST