[리액트 React] 이미지 업로드 이름 찾아오기

 

 

 

이건 TIL 이자 바보같았던 치열한 고민의 흔적이랄까..

이미지 파일 업로드까지 다 구현해놓고 그 이미지의 파일명을 가져오지 못해서 하루를 날린 기록을 적어본다.

동기가 마무리를 state 마무리를 도와줘서 바로 해결되었던,, 역시 동기사랑 나라사랑

일단 이걸 고민했던 시간을 반성하며..

 

 

✅ 일단 구현된 코드 방식(이건 참고용, 다양한 방법이 있다)

 

 

const [imgName, setImgName] = useState<string>('');

const onClickImg = useCallback(async() => {
   if (loading) return;
   if(imgChanged){
      setImgChanged(img.url);
    } else {
         const data = await readFile('image/*')
         setImgName(data.name);
         const reader = new FileReader();
         reader.onload = () => {
            const dataURL = reader.result as string;
            setImgChanged(dataURL);
        };
        reader.readAsDataURL(data);
    }
}, [imgChanged, loading, img.url])

 

return (
   <div>
      <ImgButton
         onClick={onClickImg}
      >
         이미지 찾기
      </ImgButton>
      <ImgName>{imgName}</ImgName>
   </div>
)

 

 

1️⃣ useState 사용

 

const [imgName, setImgName] = useState<string>('')

 

 

2️⃣ onClick 함수 내 이름 넣어주기

 

...
const data = await readFile('image/*')
setImgName(data.name);
...

 

여기서 data를 콘솔로 찍으면 name이 나오기 때문에 이런 식으로 함수를 구성했다.

 

 

3️⃣ 파일 이름 사용하고 싶은 곳에 사용하기

 

<ImgName>{imgName}</ImgName>

 

 

아주 쉽고 사소한 코드인데, 이걸 하루종일 치열하게 고민한 시간들이 아까우면서도 두 번은 실수 안하겠다 싶었다.

모든 코드를 익숙하게 쓰는 그 날까지 ㅠㅠ !