보통 우리가 이미지, 동영상등 사이즈가 큰 파일들을 저장할때에는 다른 데이터베이스에 저장을 한다
그럼 이미지용 서버를 하나 더 파던가 아니면 클라우드 서비스를 제공해주는 곳에서 저장소(storage)를 빌려서 저장해야 한다
해당 저장소에 저장하면 이미지를 다운로드 할 수 있는 주소를 주고 그 주소를 우리의 데이터베이스에 저장하는 것이다
이미지는 문자가 아닌데 어떻게 주고 받는 것일까??
이미지를 저장시에는 이미지의 각각의 모든 픽셀의 RGB값을 저장하여 그걸 주고 받는것 (동영상도 동일)
HTML에서 이미지를 저장시에는
<input type="file" />사용하여 저장한다
해당 태그의 css를 부여하려면 2가지 방법이 존재한다
label 태그와, useRef를 이용하는 방법이다
label태그를 이용하기
HTML
<label for="fileSave">저장하기</label>\
<input type="file" id="fileSave" />JSX
<label htmlFor="fileSave">저장하기</label>\
<input type="file" id="fileSave" />위와 같이 input의 id와 label의 for,htmlFor을 일치시키면
해당 label을 클릭할시 input file이 작동되기 때문에
input을 안보이게 display:none을 주고 label을 꾸미는 거다
useRef 이용하기
react에서 태그에 접근을 도와주는 useRef가 존재한다
const fileRef = useRef(null);
const onClickBtn = () => {
fileRef.current.click();
};
return(
<div>
<button onClick={onClickBtn}>등록하기</button>
<input type="file" ref={fileRef}/>
</div>
)등록하기라는 button태그를 클릭하면 onClickBtn함수가 실행이 되고
useRef를 통하여 input이 클릭되게 된다
위를 이용하여 label때와 같이 display를 none으로 주고 버튼을 꾸미는 것이다
