[React] input 으로 프로필 이미지 업로드 하기

 

 

 

👀 컴퓨터 안에있는 파일 이미지를 이용해서 업로드 할 수 있는 기능을 구현해 보았다!

생각보다 간단해서 정리해 보았다 :) 

 

 

 

 

 

이용한 것 

 

- input type: file

- useState 

 

import React, { useState } from 'react';
import * as S from './Mypage.style';

const Mypage = () => {
  const [uploadedImage, setUploadedImage] = useState(null);

  const onChangeImage = e => {
    const file = e.target.files[0];
    const imageUrl = URL.createObjectURL(file);
    setUploadedImage(imageUrl);
  };
  return (
    <S.MypageWhole>
      <div>
        <div>
          <p>My Page</p>
          <img src="./images/logout.png" alt="로그아웃" />
        </div>
        <div>
          {uploadedImage ? (
            <S.MyProfileImg src={uploadedImage} alt="프로필 없을때" />
          ) : (
            <S.MyProfileImg src="./images/profile.png" alt="프로필사진" />
          )}
          <input type="file" onChange={onChangeImage} />
        </div>
      </div>
    </S.MypageWhole>
  );
};
export default Mypage;

 

---

✔️ 나눠서 설명

const [uploadedImage, setUploadedImage] = useState(null);

 

- useState를 이용하여 uploadedImage 상태를 초기화 한다.

 

 

 <div>
          {uploadedImage ? (
            <S.MyProfileImg src={uploadedImage} alt="프로필 없을때" />
          ) : (
            <S.MyProfileImg src="./images/profile.png" alt="프로필사진" />
          )}
          <input type="file" onChange={onChangeImage} />
        </div>

- input type에 'file' 을 지정하고 onChangeImage 함수를 만들었다.

 

 

const onChangeImage = e => {
    const file = e.target.files[0];
    const imageUrl = URL.createObjectURL(file);
    setUploadedImage(imageUrl);
  };

 - 파일을 선택하고, 선택한 파일의 URL을 생성하여 uploadedImage 상태에 저장하는 역할을 한다.

 

-  const file:  input 태그에서 선택한 파일은 e.target.files 배열에 담겨 있으며 첫번째 파일을  file 변수에 저장한다.

 

- const imageUrl : URL.createObjectURL() 메소드를 이용하여 파일 URL을 생성한다.

** 이 메서드는 선택한 파일을 Blob URL로 변환해주는데, 이를 이용하여 <img> 태그에서 이미지를 표시할 수 있고, 

이 때, imageUrl 변수에 생성한 파일 URL을 저장한다.

 

- setUploadedImage : imageUrl 변수에 저장한 파일 URL을 uploadedImage 상태에 저장하고, 즉시 프로필 이미지가 변경되도록  이때, imageUrl 변수에 저장한 파일 URL을 uploadedImage 상태에 저장!

 

그러면 바로 프로필 이미지가 변경된다!