[react] 프로필 이미지 변경하기(feat. typescript)

유저의 프로필 이미지 변경하는 기능은 추후에 참고할 일이 생길 것 같아 기록해본다.

프로필 이미지를 변경해주는 로직은 텍스트 에디터에서 이미지를 핸들링해주었던 방법과 비슷하다. 엔드포인트도 같았다.

 

간단히 진행 방식을 기록해보자.

 

1. 파일 업로드를 위한 input 태그를 만들어준다.

  // 프로필 이미지 수정을 위한 ref
  const fileInput = useRef<HTMLInputElement>(null);

<div>
     <EditUserImg
           src={revisedImage || profileUrl}
           alt="프로필 사진"
           onClick={onClickImg}
     />
     <input
           type="file"
           accept="image/jpg,impge/png,image/jpeg"
           name="profile_img"
           className="image_upload"
           onChange={onChangeImage}
           ref={fileInput}
/>

2. 이미지 클릭시 ref가 input 태그를 가리킨 후 파일 업로더가 뜨도록 한다.

  // 프로필 이미지 클릭시 파일 업로더 뜸
  const onClickImg = () => {
    if (fileInput.current) {
      fileInput.current.click();
    }
  };

  // image uploader
  const onChangeImage = async (e: React.ChangeEvent<HTMLInputElement>) => {
    e.preventDefault();
    const uploadFile = e.target.files[0];
    const formData = new FormData();
    formData.append("file", uploadFile);
    const responseUrl = await convertImageUrl(formData);
    setRevisedImage(responseUrl);
  };

이미지 핸들링 함수는 텍스트 에디터에서 했던 방식과 동일하다.

convertImageUrl 함수는 서버에 이미지 처리를 요청하여 s3에 이미지를 저장되면 url 을 반환받는 네트워크 통신 함수이다.

export const convertImageUrl = async (formData: any): Promise<any> => {
  const response = await axios.post("/upload", formData, {
    headers: {
      "Content-Type": "multipart/form-data",
    },
  });
  return response.data.data.path;
};