[React] 프로필 사진 업로더 만들기

프로필 사진을 클릭하면 프로필 사진을 업로드 할 수 있도록 만들어 보자

1. 프로필 사진을 표시 할 창 생성

const [Image, setImage] = useState("https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png")
const fileInput = useRef(null)

<Avatar 
        src={Image} 
        style={{margin:'20px'}} 
        size={200} 
        onClick={()=>{fileInput.current.click()}}/>

일단 프로필 사진이 표시 될 공간이자 이미지 업로더가 될 태그를 만들어주자.

img태그로 동그랗게 만들어도 된다. 나는 antd의 Avatar를 사용했다. 그리고 프로필 기본 이미지를 초깃값으로 한 state를 만들어 src에 넣어준다.

useRef() 변수를 생성해서 사진을 클릭하면 파일 업로더를 띄울 수 있도록 onClick함수의 이벤트에 넣어주자.

2. input 태그를 사용하여 파일 업로더 생성

실질적인 기능을 담당 할 Input태그를 생성하자.

const fileInput = useRef(null)
  
 <input 
 	type='file' 
    	style={{display:'none'}}
        accept='image/jpg,impge/png,image/jpeg' 
        name='profile_img'
        onChange={onChange}
        ref={fileInput}/>

file타입의 input태그 생성 후 useRef() 변수를 만들어 이 input태그를 참조하도록 하자.

제일 중요한 점은 input태그의 기본 디자인을 가려줄 수있도록 display:none 스타일을 입혀줘야 한다.

    const fileInput = useRef(null)
 
    const onChange = (e) => {
	if(e.target.files[0]){
            setFile(e.target.files[0])
        }else{ //업로드 취소할 시
            setImage("https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png")
            return
        }
	//화면에 프로필 사진 표시
        const reader = new FileReader();
        reader.onload = () => {
            if(reader.readyState === 2){
                setImage(reader.result)
            }
        }
        reader.readAsDataURL(e.target.files[0])
    }

파일을 첨부할 때 onChange 함수가 실행된다.

파일 첨부를 취소해도 onChange함수가 실행되기 때문에 파일 업로드를 취소하면 기본 프로필 이미지를 설정 하도록 해준다.

FileReader을 생성하고 이미지를 정상적으로 불러오면 이미지를 프로필 사진으로 지정한다.

readAsDataURL함수로 받아온 파일을 reader로 불러와준다.

프로필 사진을 눌러 사진을 선택했을 때 정상적으로 변경되는 것을 확인할 수 있다.