728x90 300x250 SMALL 프론트엔드22 React에서 useState를 활용한 간단한 회원가입 폼 만들기 이번에는 useState를 활용하여 이름과 성별을 입력받고, 제출 버튼을 누르면 입력된 값을 출력하는 간단한 회원가입 폼을 만들어보자 1. React에서 useState란?useState는 함수형 컴포넌트에서 상태를 관리할 수 있도록 도와주는 React의 훅이다. 이 훅을 사용하면 입력값을 저장하고 변경할 수 있다. 2. 회원가입 폼 만들기아래는 이름과 성별을 입력받는 폼을 구현한 코드이다.import React, { useState } from "react";const RegisterForm = () => { const [userName, setUserName] = useState(""); const [userGender, setUserGender] = useState("남성"); c.. 2025. 2. 3. 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. 함수 매개변수에서 디스트럭처링 제대로 이해하기 디스트럭처링은 여러 가지 상황에서 유용하다. 예를 들어, 함수의 매개변수로 객체나 배열을 전달할 때, 각 값에 쉽게 접근할 수 있도록 도와준다. JavaScript 함수에서 객체 디스트럭처링을 활용하는 방법JavaScript에서 함수의 매개변수로 객체를 받을 때, 디스트럭처링(구조 분해)을 이용하면 코드가 더 간결하고 직관적이 된다.function greet({ name, age }) { console.log(`Hello, ${name}. You are ${age} years old.`);}const person = { name: "Alice", age: 25 };greet(person); // "Hello, Alice. You are 25 years old." 이 코드에서 greet({name, a.. 2025. 1. 27. 객체/배열 디스트럭처링 시 기본값 설정하기 디스트럭처링을 할 때, 값이 존재하지 않으면 기본값을 설정할 수 있다.이 경우, 변수에 기본값을 지정하면 해당 값이 없을 때 대신 사용된다. 객체 디폴트 값const person = { name: "Alice" };// age가 없으면 30을 기본값으로 설정const { name, age = 30 } = person;console.log(name); // "Alice"console.log(age); // 30 (기본값) 배열 디폴트 값const numbers = [1];// 두 번째 값이 없으면 2를 기본값으로 설정const [first, second = 2] = numbers;console.log(first); // 1console.log(second); // 2 2025. 1. 26. 이전 1 2 3 4 5 6 다음 728x90 반응형 LIST