리액트에서 이미지를 업로드하고 싶습니다

Question

안녕하세요 리액트를 공부중인 학생입니다! 리액트를 이용해 가보고 싶은 맛집을 리스트에 업로드 하는 페이지를 제작중입니다!! 다름이 아니라 가게이름, 음식의 종류, 간단한 메모는 업로드하고 리스트에서 불러오기가 가능한데 이미지 파일에 대한 궁금증이 생겼습니다. 만약
const [file, setFile] = useState()로 선언한 후

<input type=file onChange ={()=>setFile(e.target.files)}를 하고 버튼을 추가하여 리스트에 추가하려고 하면 프론트엔드에서는 리스트에 사진은 구현이 안되나요? 백엔드를 이용해야 할까요?

미리 PUBLIC파일에 저장한 이미지들은 process.env.PUBLIC_URL을 통해 불러올 수 있는데 새롭게 업로드한 글은 PUBLIC 폴더에 사진 저장이 안되서 어떻게 구현해야 할 지 의문입니다!

손정현 · Answer

프론트엔드에서는 리스트에 사진은 구현이 안되나요? = 가능하지 않을까요?

정확한 요구사항이 뭔지는 잘 모르겠습니다만 e.target.files 자체가 리스트입니다.

그래서 onChange ={()=>setFile(e.target.files)} 이렇게 하셨다면, file은 리스트니 보여주고 싶은 위치에서 반복문을 돌면서 이미지 파일을 사용하시면 되지 않을까 싶네요.

참고:
https://web.dev/read-files/
https://developer.mozilla.org/ko/docs/Web/API/FileList

혹시 이미지 업로드한 것을 페이지 이탈 후에 재방문했을 때 다시 불러오는 것이 목적이라면, 어딘가에 저장을 해야하니 백엔드를 통해서 DB 또는 파일 시스템에 저장하실수는 있습니다.

또는 CDN으로 이미지를 업로드 후, CDN이 제공하는 url을 사용하실수도 있어요.
아니면, aws s3 같은 곳에 이미지를 저장하고 s3 데이터를 url로 접근하실 수 있으니 그걸 사용하셔도 되구요.

방법은 많은 것 같습니다.