[TIL]231124_이미지 미리보기, input type='file' 버튼 커스텀

👩🏻‍💻 Today Learn

• 알고리즘 1문제
• 스탠다드반 수업
• 뉴스피드 프로젝트 진행

---

🤦🏻‍♀️ 고민한 부분

이미지 미리보기 기능

팀 프로젝트 하면서 내가 맡은 부분인 게시물등록시에 이미지를 미리보기하는 기능을 구현하기 위해 고민하고 찾아보면서 적용해봤다.

우선 적용한 코드를 먼저 적어보면 아래와 같다.

const imageChangeHandler = (event) => {
        const file = event.target.files[0];
        const reader = new FileReader();
        reader.readAsDataURL(file);

        return new Promise((resolve) => {
            reader.onload = () => {
                setImageFile(reader.result || null);
                resolve();
            };
            setImageUrl(file);
        });
    };

이 부분은 블로그를 보고 참고하여 도움을 받았기 때문에 링크를 함께 공유한다!

https://nukw0n-dev.tistory.com/30

이 로직에 대해 이해한 내용을 정리해보자
(작성예정)

---

💡 알게된 내용

파일 업로드 버튼 커스텀하기

이미지 파일을 업로드하는 기능을 만들기 위해서는 input의 type=file 로 설정하면

이런 못생긴 버튼이 생긴다.

파일선택을 누르면 내가 선택한 파일명이 옆에 나타나게 되는데 파일선택 버튼을 다른 모양으로 대체할 수 없을지 찾아보다가 알게된 기능정리!

input태그에 id값을 설정하고 대체할 버튼의 태그를 label로 하여 htmlFor에 id값을 입력해주면 커스텀 완료!

여기를 눌러보세용

<input
    id='inputFile'
    type='file'
    ref={fileInput}
    accept='image/*'
    value={inputImg}
    style={{ display: 'none' }}
    onChange={(e) => imageChangeHandler(e)}
   />
<label htmlFor='inputFile'>O</label>

그리고 input의 스타일에 display: 'none' 을 설정해주고 대체하고 있는 요소를 내 입맛대로 디자인 해볼 수 있다!

---

✍🏻 회고

알면알수록 새롭고 신기한 기능이 많고 그걸 찾아가면서 다양하게 사용해보며 나의 데이터를 쌓아가는 재미도 있는것 같다.
내가 다른 사람의 글을 보고 참고하여 문제를 해결해가는 것처럼 다른 누군가가 나의 글을 보면서 유레카!를 외칠 수 있도록 공부한 기록을 더 꼼꼼하게 작성하는 연습이 필요할 것 같다.
이러한 생각이 든 이유는 구글링으로 문제해결은 했지만 해결방법을 누군가에게 설명하는것에는 어려움을 느끼고 있기 때문이다🤦🏻‍♀️