728x90 300x250 SMALL react17 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. 리액트에서 Arguments (매개변수) 전달하기 함수에서 전달할 데이터를 Arguments라고 하며 리액트에서 파라미터(parameter)와 매개변수(argument)는 함수 정의와 호출에서 동일한 개념을 다룬다. 리액트에서 Arguments 전달하기는 주로 컴포넌트 간 데이터 전달, 이벤트 핸들러에 인자 전달, 또는 함수 호출 시 인자를 넘길 때 사용된다. 리액트는 props를 통해 부모 컴포넌트에 자식 컴포넌트로 데이터를 전달하는 구조를 가지고 있지만, 이벤트 핸들러에 인자를 전달하거나, 함수를 호출할 때 인자를 전달하는 방식도 자주 사용된다. 1. Props를 통한 컴포넌트 간 데이터 전달리액트에서 props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 기본 방법이다. 부모 컴포넌트에서 데이터를 전달하고, 자식 컴포넌트에서 이를 받을 수.. 2024. 12. 26. 커스텀 훅 만들기 커스텀 훅 이란?커스텀 훅은 React의 기본 훅(useState, useEffect, useReducer 등) 을 활용하여 재사용 가능한 로직을 함수로 추출한 것이다. 이를 통해 여러 컴포넌트에서 공통된 로직을 손쉽게 공유할 수 있다.즉 기존에 있는 React 훅을 이용해서 새로운 훅을 만들고 이름을 use로 시작하면 커스텀 훅(Custom Hook)이 된다. 커스텀 훅 만들기 예제1. useCounter 커스텀 훅 만들기import { useState } from 'react';// 커스텀 훅 정의function useCounter(initialValue = 0) { const [count, setCount] = useState(initialValue); const increment = () =.. 2024. 12. 10. 이전 1 2 3 4 5 다음 728x90 반응형 LIST