오늘 React로 이미지 업로드를 하기 위해 React 훅 기능중 하나인 useRef를 배웠다.
useRef를 사용하기 전엔 간단하게 Input type을 file로 선언하고 불러오면 되는 줄 알았지만 생각보다 복잡하고 이해하는데 좀 어려웠고 다른 데이터와는 다르게 이미지는 다른 방식의 데이터 저장을 하고 있어 복습 겸 글을 작성하려한다.
useRef는 JavaScript에서 querySelector처럼 특정 DOM에 접근할 수 있게 해주는 React 훅의 기능이다.
간단하게 useRef로 어떻게 DOM에 접근하는 지 실습해봤다. 추가로 useEffect를 같이 활용하여 복습 겸 화면이 렌더링되고 나서 실행되는 것도 진행해봤다.
import { useEffect, useRef } from "react";
export default function UseRefFoucus() {
const focusRef = useRef(null);
console.log(focusRef);
useEffect(() => {
focusRef.current?.focus();
}, []);
return (
<>
<input type="password" ref={focusRef} />
</>
);
}
- useRef로 focus를 사용하여 첫 화면이 렌더링이 되자마자 Input창이 포커스되어 깜빡거리는 것을 볼 수 있다.
먼저 useRef를 활용하기 전 이미지 저장 과정에 대해 알아봐야 하는 부분이 있다.
브라우저가 이미지를 백엔드로 보냈을 때 백엔드에서는 다른 데이터들처럼 이미지를 저장하지 않고 클라우드서버에 보낸다.
- AWS, GCP, Azure같은 클라우드 서버를 제공해주는 곳에서 storage를 저장해 백엔드로 다시 보내고 백엔드에서 그 이미지에 주소를 입혀 프론트엔드 state로 보내 저장한다.
브라우저에서 게시글을 요청했을때 다른 데이터완 달리 이미지는 용량이 크기때문에 DB에 주솟값만 저장해놨다가 불러올때 다시 클라우드 서버에서 요청하여 주소값을 이용해 이미지를 불러와 화면에 렌더링이 된다.
이미지는 1 픽셀 당 RGB색상으로 이뤄줘 있기때문에 결국 모든 칸을 숫자로 변경하여 저장한다. 이렇게 되면 용량이 매우 커지기 때문에 주소값만 부여하여 클라우드서버에 저장하고 있다.
- 기존 Input을 display: none 처리하고 손가락 버튼으로 대체해 누르면 이미지를 찾을 수 있는지 console에 uploadFile 데이터가 들어오는지 확인 후에 저장하면 게시글 생성되는지까지 확인 잘 된 것같다..!