React 활용 - 6 : 첨부 이미지 파일 미리보기 (react 이미지 미리보기, react state 배열)

이번에는 지난 시간의 소스를 활용하여 첨부한 이미지를 미리보기로 보는 기능을 만들어 보자. 우선 원리는 아래와 같다. 1) 첨부 이미지를 버퍼 (base64) 형식으로 변환 2) base64 데이터를 state에 배열 형태로 저장 3) 저장 된 배열 state를 화면에 뿌려줌 base64 데이터를 저장 할 배열 state를 선언한다. const [imgBase64, setImgBase64] = useState([]); import React, { useState, useEffect } from 'react'; import axios from 'axios'; function FileData() { const [file, setFile] = useState(null);//파일 const [imgBase64,..

2022.10.13

React 활용 - 5 : Spring에 파일데이터 전송하기 (react 다중 파일)

이번 시간에는 react - spring 간 파일 데이터 전송을 구현해보자. 우선 파일 데이터를 보낼 FileData.js 를 Screen 폴더 아래 아래와 같이 만들어준다. FileData.js import React from 'react'; function FileData() { } return ( FileData fileData1: Send ); } export default FileData; file 데이터를 저장 할 state를 선언한다. import React, { useState, useEffect } from 'react'; import axios from 'axios'; function FileData() { const [file, setFile] = useState(null);//파일 ..

2022.10.11

React - 파일 데이터 전송하기(파일 업로드, 파일 미리보기)

리액트에서 파일 업로드를 하는 방법은 기존 ajax를 사용하는 방법과 크게 다르지 않다. 스테이트에 파일 데이터를 넣는 방법이 다른 부분이 있어서 해당 부분부터 처리를 해야한다. 먼저 아래와 같이 두개의 스테이트를 생성한다. const [imgBase64, setImgBase64] = useState([]); // 파일 base64 const [imgFile, setImgFile] = useState(null);//파일 imgFile은 이미지 파일 그 자체를 받을 스테이트이고, imgBase64는 미리보기를 구현하기 위해서 이미지 데이터를 받을 스테이트이다. 아래와 같이 input을 만들어준다. 위 input에 파일을 등록하면 handleChangeFile 함수가 실행한다. const handleChan..

2021.05.27