[리액트] input 이미지 미리보기_🎨

 

<React_input>

 

input으로 첨부한 이미지 미리보기에 대해 알아보자

 

---

 

<STUDY>

 

1. 파일 첨부

 

지난 포스팅에서 input 파일을 첨부하고 버튼 꾸미는 방법에 대해 소개했다.

궁금하다면 포스팅 참고하기

 

👉[리액트] input [type='file'] 폼 꾸미기_🎵 / 버튼으로 파일 첨부

 

 

2. 이미지 경로 추가할 state 생성

``````

import React, { useState } from 'react';

// 생략

``````

const [imgPath, setImgPath] = useState(); // 단일 이미지

const [imgPath, setImgPath] = useState([]); // 여러 이미지

 

   💡 이미지를 여러장 보여줄 경우 배열로 state를 생성한다.

 

 

3. label 태그에 onChange 이벤트 추가

 

   ❔ URL.createObjectURL(object)

 

   - input 으로 가져온 이미지의 주소를 생성해야 하는데 이 때 브라우저 상에서 사용 가능한 url을 생성해 준다.

   - object : File, Blob, MediaSource 

   - 자세한 내용은 👉여기서👈 봐주세요!

 

``````

import React, { useState } from 'react';

// 생략

``````

const [imgPath, setImgPath] = useState([]);
const addImage = event => {
  for (let i = 0; i < event.target.files.length; i++) {
    const newPath = [...state.imgPath, URL.createObjectURL(event.target.files[i])];
    setImgPath(newPath);
  }
};

``````

<label
  className='inputFileLabel' 
  htmlFor='inputForm' 
  onChange={event => addImage(event)}  // onChange 이벤트 추가
>
  업로드 // 버튼에 들어갈 원하는 글자
  <input className='inputFile' type='file' id='inputForm' />
</label>

 

   💡 event.target.files : 첨부된 이미지의 정보 (배열이 아닌 객체로 나타남)

      ❕ 객체형태로 나타나기 때문에 for 반복문을 사용하여 imgPath state에 추가해 주었다

 

 

4. 이미지 보여주기

{
  imgPath.map((file, index) => (
    <Box key={index}>
      <img src={file} alt='사진' />
    </Box>
  ))
};

 

   💡 업데이트 된 state를 map을 사용하여 보여주면 된다

 

 

---

 

이미지 url을 생성하는 부분에서 조금 헷갈렸지만 구현하는데 크게 어려운 부분은 없었던 것 같다.

 

이미지가 아닌 파일을 첨부하는 경우 이름을 보여주고 싶으면 같은 방법으로 구현하면 된다.

 

 

---

 

내가 보려고 정리하는 리액트🔆

 

👉ez1n github 구경하기👈 

 

ez1n - Overview