React 이미지파일 미리보기

이번에는 React 프로젝트에서 이미지 파일 미리보기 기능을 정리합니다.

음.. 좀더 상세히 말하면

웹사이트에서 이미지 파일을 업로드 하기전에!

웹사이트 상에 이미지를 출력하여 미리보기 하는 기능입니다.

간단한 예제를 만들며 정리하겠습니다.

 

01. 화면 UI 만들기

화면 UI는 아래와 같이 만들어 보겠습니다.

화면UI

간단하게 이미지 미리보기영역과 input(type file)박스입니다.

코드는 아래와 같습니다.

 

import React from 'react';

function App() {
  return (
    <div className="App">
      <div style={{"backgroundColor": "#efefef", "width":"150px", "height" : "150px"}}>
      </div>
      <div>
        <input type="file" name="imgFile" id="imgFile" />
      </div>
    </div>
  );
}

export default App;

 

 

02. State 추가하기

이미지는 미리보기 할때는 <img src="" /> 에 들어갈 base64 인코딩 값이 필요합니다.

또 file의 상태도 필요할겁니다.(결국 업로드는 file을 하는거니깐요)

아래와 같이 추가해줍니다

 

import React, { useState } from 'react';

function App() {
  const [imgBase64, setImgBase64] = useState(""); // 파일 base64
  const [imgFile, setImgFile] = useState(null);	//파일	
  
  return (
    <div className="App">
      <div style={{"backgroundColor": "#efefef", "width":"150px", "height" : "150px"}}>
      </div>
      <div>
        <input type="file" name="imgFile" id="imgFile" />
      </div>
    </div>
  );
}

export default App;

hooks의 useState를 사용했습니다.(redux를 사용한다면 거기에 맞게 state를 정의하시면 됩니다.)

 

 

03. onChange 구현

input type="file" 태그가 변할때 마다 실행시켜줄 핸들러 함수가 필요합니다.

아래와 같이 작성해줍시다.

import React, { useState } from 'react';

function App() {
  const [imgBase64, setImgBase64] = useState(""); // 파일 base64
  const [imgFile, setImgFile] = useState(null);	//파일	
  
  const handleChangeFile = (event) => {
    let reader = new FileReader();

    reader.onloadend = () => {
      // 2. 읽기가 완료되면 아래코드가 실행됩니다.
      const base64 = reader.result;
      if (base64) {
        setImgBase64(base64.toString()); // 파일 base64 상태 업데이트
      }
    }
    if (event.target.files[0]) {
      reader.readAsDataURL(event.target.files[0]); // 1. 파일을 읽어 버퍼에 저장합니다.
      setImgFile(event.target.files[0]); // 파일 상태 업데이트
    }
  }
  
  return (
    <div className="App">
      <div style={{"backgroundColor": "#efefef", "width":"150px", "height" : "150px"}}>
      </div>
      <div>
      	{/* onChange 추가 */}
        <input type="file" name="imgFile" id="imgFile" onChange={handleChangeFile}/>
      </div>
    </div>
  );
}

export default App;

handleChangeFile 함수를 등록하고, input 태그에 onChange에 설정했습니다.

실행해보면 아래와 같은 결과를 보실수 있습니다.

 

실행화면

 

이미지 파일을 저장하는 방법은 아래에 정리되어있습니다~

https://basketdeveloper.tistory.com/55