728x90 300x250 SMALL Front-end305 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. 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 2 3 4 ··· 77 다음 728x90 반응형 LIST