input
-
input image 미리보기 구현하기React.js & Next.js 2023. 3. 31. 23:15
Prerequisites useRef typescript FileReader Object Code import React, { useRef } from 'react'; const Test3 = () => { const imgRef = useRef(null); const readImage = (e: React.ChangeEvent) => { if (!e.target.files?.length) return; const imageFile = e.target.files[0]; const reader = new FileReader(); reader.addEventListener('load', (e: ProgressEvent) => { if (!e || !e.target) return; if (typeof e.ta..
-
리액트에서 다수의 체크 박스 다루기React.js & Next.js 2022. 9. 13. 22:25
우리는 사용자에게 선택지를 제공할 때 또는 등을 사용한다. radio의 경우 여러 개의 선택지 중 한 가지를 선택해야 할 때 주로 사용하고, checkbox의 경우 여러 개의 선택지 중 중복 선택이 가능할 때 주로 사용된다고 볼 수 있다. 을 통해 유저의 인터렉션(클릭 이벤트)을 캐치하여 데이터를 생성해야 할 때, checkbox는 사용자의 선택을 배열로 관리하여 데이터화한 이후, 서버 또는 데이터 베이스에 저장하기 유용한 자료구조이다. 이번에는 리액트 프레임워크에서 를 통해 체크 여부를 배열 데이터로 관리하는 방법을 배워볼까 한다. 준비 기본적으로 string으로 구성된 더미 배열을 생성한다. jsx 문법 내부에 생성할 경우, 지속적으로 리 렌더링 되며 초기화될 수 있으므로 컴포넌트 윗부분에 작성하도록..