728x90 300x250 SMALL Front-end/React115 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 이미지 파일 처리하기 파일을 선택하고 미리보기를 제공하는 React 컴포넌트는 이미지 파일을 선택한 후, 미리보기 이미지를 표시하고, 파일을 초기화할 수 있는 기능을 추가한다. 기능 설명파일 미리보기 : 사용자가 파일을 선택하면 handleFileChange 함수가 실행된다. 이미지 파일 URL을 생성하여 미리보기 URL을 상태로 저장한다.파일 초기화 : 사용자가 파일을 초기화할 수 있는 버튼을 제공하여, 선택한 파일을 상태에서 삭제할 수 있다.이미지 제한 : accept="image/*"속성을 사용하여 오직 이미지 파일만 선택할 수 있도록 제한한다.미리보기 이미지 표시 : url.createObjectURL(file)로 파일의 URL을 생성하고, 이를 태그로 미리보기 이미지를 보여준다.사용예제import React, {.. 2025. 1. 23. React에서 파일 업로드 기능 구현 : 다중 파일 선택과 출력 React로 파일을 선택하고, 선택된 파일 목록을 화면에 표시하는 방법 기능 설명 파일 입력 처리 : 사용자가 로 파일을 선택하면, handleFileChange 함수가 호출된다. 선택된 파일들은 setSelectedFiles를 통해 상태로 관리된다.파일 목록 출력 : 선택된 파일들은 배열로 저장되며, selectedFiles 상태에 저장된 각 파일의 이름과 크기를 화면에 출력한다.다중 파일 선택 : multiple 속성을 사용하여 여러 파일을 선택할 수 있다. 코드 예시import React, { useState } from "react";function FileInputExample() { const [selectedFiles, setSelectedFiles] = useState([]); con.. 2025. 1. 22. 리액트에서 다중선택 select 옵션을 동적으로 표현 리액트에서 다중 선택이 가능한 요소는 multiple 속성을 사용하여 구현한다. 기본적인 다중선택 select 구현import React, { useState } from "react";function MultiSelectExample() { const [selectedOptions, setSelectedOptions] = useState([]); const handleChange = (event) => { const options = event.target.options; const selectedValues = []; for (let i = 0; i 다중 선택 셀렉트 박스 사과 바나나 체리 대추야자 .. 2025. 1. 21. 이전 1 ··· 7 8 9 10 11 12 13 ··· 29 다음 728x90 반응형 LIST