[ Fire Base / ver. 9.14.0 ] 3-1. 이미지 업로드

2. 업로드된 컴포넌트 삭제/수정 기능과 이어지는 내용이다.

Home.js 파일내부에 내용이다.

 

Home.js는 Zwitter앱의 홈화면(메인화면)이 될 컴포넌트이다.

 

 

# 메소드 영역

const [attachment, setAttachment] = useState();
//파일을 위한 스테이트이다.

const onFileChange = ({target:{files}}) => {
    const theFile = files[0];
    //파일을 가져오고
    
    const reader = new FileReader();
    //reader를 만든 후
    
    reader.onloadend = ({currentTarget:{result}}) => {
        setAttachment(result);
    };
    //파일로드가 완료되면 파일을 스테이트에 넣어줌.
    
    reader.readAsDataURL(theFile);
    //readAsDataURL을 사용해서 파일을 읽는다.
}
const onClearAttachment = ()=> setAttachment(null);
//클리어 버튼을 누를경우 적용시켜줄 함수

 

# 컴포넌트 마운트 영역

{ attachment && (
    <div>
        <img src={attachment} width="50px" height="50px"/>
        <button onClick={onClearAttachment}>Clear</button>
    </div>
) }

이미지를 선택하여 업로드하면 attachment가 존재하게 되고 위와 같이 요소들이 마운트된다.

가로세로 50px의 미리보기 이미지가 나오게 되고 Clear버튼을 누르면

onClearAttachment함수에 의해서 이미지가 사라지게된다.

( setAttachment(null) => attachment = null )