728x90 300x250 SMALL Front-end/React78 파일 업로드와 미리보기 : 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. React 드롭다운 메뉴 구현 : 선택된 값 표시하기 드롭다운 메뉴에서 사용자가 선택한 값을 추적하고 화면에 표시하는 React 예제코드설명1. useState로 상태 선언selected라는 상태 변수와 이를 업데이트하는 setSelected함수 생성2. onChange 이벤트 핸들러드롭다운 메뉴에서 선택된 값을 감지하고 상태를 업데이트3. 출력선택된 값이 태그에 즉시 반영 사용예제function SelectExample() { const [selected, setSelected] = useState("apple"); const handleChange = (e) => setSelected(e.target.value); return ( 사과 바나나 체리 선택된 과일: {sele.. 2025. 1. 21. 이전 1 2 3 4 ··· 20 다음 728x90 반응형 LIST