react 이미지 변환 과정

👇AddButtom 함수 부분

const AddButton = () => {
  const imgRef = useRef();
  const [imageUrl, setImageUrl] = useState(false);
  const [imgFile, setImgFile] = useState("")
  
  const onChangeImage = () => {
    const reader = new FileReader();
    const file = imgRef.current.files[0];
    reader.readAsDataURL(file);
    reader.onloadend = () => {
      setImageUrl(reader.result);
      setImgFile(file)
    };
  }

👇ref 가 있는 input박스 부분

 <input
                type="file"
                onChange={onChangeImage}
                id="upload-photo"
                name="upload-photo"
                ref={imgRef}
                style={{ display: 'none' }}
              />

😵useRef

• 특정 DOM을 직접 선택할 때 사용
• 함수형 컴포넌트에서 ref 를 사용 할 때에는 useRef 라는 Hook 함수를 사용
  -useRef 함수는 current 속성을 가지고 있는 객체를 반환하는데, 인자로 넘어온 초기값을 current 속성에 할당
• useRef() 를 사용하여 Ref 객체를 만들고, 이 객체를 우리가 선택하고 싶은 DOM 에 ref 값으로 설정해주어야함. 그러면, Ref 객체의 .current 값은 우리가 원하는 DOM 을 가르키게 됨.
• 위 예제에서는const file = imgRef.current.files[0]; imgRef로 우리가 원하는 위치인 input을 가리키게 됨
• useRef는 리렌더링 하지 않는다. 컴포넌트의 속성만 조회&수정

🧐이미지 업로드

• 컴퓨터에서 가져오기 버튼을 누르면 input박스의 type='file'이 실행되기 위해서는 input태그의 style={{ display: 'none' }}을 설정하면 됨

const onChangeImage = () => {
    // File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 
    사용자의 컴퓨터에 저장하는 것을 가능하게 해줌
    //간단히 말하면 해당 파일 리더를 통해서 파일 정보를 읽을 수 있는 것
    const reader = new FileReader();

    //불러온 파일 정보
    const file = imgRef.current.files[0];
    
     //파일을 읽어 버퍼에 저장(해당 코드로 파일의 정보를 입력)
    reader.readAsDataURL(file);
   
    //읽기가 완료되면 아래코드 실행
    reader.onloadend = () => {
      setImageUrl(reader.result);
      setImgFile(file)
    };
  }

• 미리보기 <ImageBox src={imageUrl ? imageUrl : 'images/addImg.png'} />