뚝딱뚝딱 코딩 기록_

[React_input[type='file']] 같은 파일 연속 업로드 시 생기는 문제에 대해 알아보자 input 태그를 이용하여 이미지 첨부 및 미리보기 포스팅 👉 [리액트] input [type='file'] 폼 꾸미기_🎵 / 버튼으로 파일 첨부 👉 [리액트] input 이미지 미리보기_🎨 ⚡ input file 업로드 코드 같은 파일 (이미지)를 연속으로 업로드 하는 경우 onChange 이벤트가 실행되지 않는 오류가 발생되었다. 즉, 같은 파일이 연속적으로 추가되지 않는 문제였는데 바로 input 으로 파일 추가시 value를 초기화하지 않으면 이전 값을 그대로 가지고 있기 때문이었다. ❓ 해결방법 💡 onClick 이벤트 발생시 value 초기화하기 e.target.value = null}> -..

[React_file download] 지난 포스팅에서 HTML의 a태그를 이용하여 파일을 다운로드 하는 방법에 대해 알아보았다. 👉 [HTML] 파일 다운로드_📂 / a 태그, download, HTML [HTML] 파일 다운로드_📂 / a 태그, download, HTML [HTML_a tag] 파일 다운로드 하는 방법에 대해 알아보자 📂 a tag 사용하기 다운로드 - href : 다운받을 파일의 url 📂 파일명을 다르게 하고싶은 경우 다운로드 - download='파일명' 으로 넣어주면 된 ttugttag-coding.tistory.com 오늘은 리액트로 서버에서 받은 파일을 다운로드 할 수 있게 구현하는 방법에 대해 알아보자 `````` import React from 'react'; ````..

[React] input 으로 첨부한 이미지 파일을 서버로 전송하는 방법에 대해 알아보자 1. 이미지 첨부하기 (input 태그 사용) import React from 'react'; export default function App() { return( ) } 2. 첨부한 파일 state에 저장하기 import React, {useState} from 'react'; export default function App() { const [image, setImage] = useState(); const addImageFile = event => { setImage(event.target.files[0]); }; return( addImageFile(event)} /> ) } onChange 이벤트를 이용..

input으로 첨부한 이미지 미리보기에 대해 알아보자 1. 파일 첨부 지난 포스팅에서 input 파일을 첨부하고 버튼 꾸미는 방법에 대해 소개했다. 궁금하다면 포스팅 참고하기 👉[리액트] input [type='file'] 폼 꾸미기_🎵 / 버튼으로 파일 첨부 2. 이미지 경로 추가할 state 생성 `````` import React, { useState } from 'react'; // 생략 `````` const [imgPath, setImgPath] = useState(); // 단일 이미지 const [imgPath, setImgPath] = useState([]); // 여러 이미지 💡 이미지를 여러장 보여줄 경우 배열로 state를 생성한다. 3. label 태그에 onChange 이벤트 추..

input 파일 첨부 폼 꾸미는 법에 대해 알아보자    파일을 첨부하고 싶은 경우에 input 태그에 있는 type='file'을 사용한다. 그러면 아래 사진처럼 기본 폼이 나타난다.하지만 이렇게 나타나는 것은 예쁘지 않으니 label을 사용하여 꾸며보자  1. label로 감싸고 htmlFor를 이용하여 input과 연결하기 업로드 // 버튼에 들어갈 원하는 글자     💡 input : 반드시 label 안에 들어갈 필요는 없음 - 원하는 위치에 놓으면 됨    ❗ 주의할 점 : label의 htmlFor과 input의 id를 동일하게 입력해야 함  2. CSS로 label을 버튼처럼 꾸미기    - 예시.inputFile { display: none;}.inputFileLabel { co..