BelieveCom

리액트(React)를 사용하면 클라이언트에서 다양한 코드를 사용할 수 있어 Web 화면 변화에 따라서 다양한 구성이 가능합니다. 오늘은 리액트(React)를 사용해서 이미지 업로드 전에 이미지를 미리 보는 방법을 알아보겠습니다. 

URL.createObjectURL() 객체를 사용해서 이미지를 확인하겠습니다. createObjectURL() 메서드는 URL을 DOMString으로 반환합니다. 반환된 정보를 사용해서 이미지 정보를 저장하고 이미지를 출력하겠습니다.

기본 구조는 매우 간단하게 "파일 선택", "미리 보기 이미지", "삭제"로 구성하겠습니다.

먼저 리액트(React) 컴포넌트 useState를 사용해서 값 변화를 관리하겠습니다.

import React, {useState} from 'react';

상단에 useState 컴포넌트를 import 합니다.

useState를 사용하기 위해서 이미지 변수를 선언합니다.

const [fileImage, setFileImage] = useState("");

리액트(React) useState 컴포넌트를 호출하면 배열을 반환합니다. 첫 번째 파라미터는 현재 상태이고, 두 번째 파라미터는 Setter 함수입니다.

  const saveFileImage = (event: React.ChangeEvent<HTMLInputElement>) =>{
    // @ts-ignore
    setFileImage(URL.createObjectURL(event.target.files[0]));
  };

이미지 정보를 저장하기 위해서 HTMLinputElement 이벤트가 발생하면 URL.createObjectURL을 사용해서 DOMString을 setFileImage Setter 함수를 사용해서 저장합니다.

  const deleteFileImage = () =>{
    URL.revokeObjectURL(fileImage);
    setFileImage("");
  };

마지막으로 저장된 이미지를 삭제할 수 있는 deleteFileImage를 정의합니다. URL.revokeObjectURL 메소드를 사용해서 객체를 초기화하고, setFileImage Setter 함수를 사용해서 useState 컴포넌트를 초기화합니다.

이제 선언한 메서드를 사용해서 HTML를 구성해보겠습니다.

import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';

function App() {

  const [fileImage, setFileImage] = useState("");
  const saveFileImage = (event: React.ChangeEvent<HTMLInputElement>) =>{
    // @ts-ignore
    setFileImage(URL.createObjectURL(event.target.files[0]));
  };
  const deleteFileImage = () =>{
    URL.revokeObjectURL(fileImage);
    setFileImage("");
  };
  return (
      <>
        <h1>이미지 업로드 </h1>
          <div style={{
              alignItems: "center",
              justifyContent: "center", }} >
              <input
                  name="imggeUpload"
                  type="file"
                  accept="image/*"
                  onChange={saveFileImage} />
            </div>
              <div>
                <h1>미리보기 이미지</h1>
              </div>
                <div>{fileImage && ( <img alt="sample" src={fileImage}
                                           style={{ margin: "auto" }} /> )}
                <button style={{
                  width: "50px",
                  height: "30px",
                  cursor: "pointer", }}
                        onClick={() => deleteFileImage()} > 삭제 </button>
              </div>
      </>
  );
}
export default App;

input 태그를 이용해서 파일을 선택하고 saveFileImage 메서드를 호출해서 useState를 저장합니다.

저장된 useState는 img 태그 src에 연결해서 이미지를 화면에 출력할 수 있습니다.

업로드하기 위한 이미지를 선택하면 미리 보기 이미지 아래쪽에 선택한 이미지를 확인할 수 있습니다. 이미지를 먼저 확인이 가능해서 업로드 시 매우 편리하게 사용할 수 있는 기능입니다.

삭제 버튼을 클릭하면 deleteFileImage를 호출해서 메모리를 초기화하고 저장된 이미지를 삭제합니다.

리액트(React) useState를 사용해서 화면 전환에 따른 값을 저장할 수 있어 다양한 기능을 사용할 수 있는 정말 편리한  기능입니다. 리액트(React) 공부 지금 바로 시작하세요.

감사합니다.