프로필 사진 바꾸기 기능

Today

오늘은 모달을 이용하여 프로필 사진을 변경하는 기능을 구현해 보았다. 모달을 만드는 방법에 대해 궁금하다면 46일차 TIL을 참고하기를 바란다.

인스타그램 클론코딩한 마이페이지

1. 해당 유저의 프로필 사진이 변경된 값을 적용시켜주기 위해 profileImg라는 이름으로 useState를 사용해 주었다. 
2. 프로필 사진아이콘을 클릭해 띄워진 모달창에서 사진 업로드 버튼을 누르면 addUploadFile함수가 실행되게 하여 주었다.
3. Input type=file을 활용해 사진 업로드 버튼을 눌렀을때, 파일을 선택할 수 있게 해주고 FormData함수 형식으로 파일을 붙여줘 Token과 함께 axios요청으로 서버에 넘겨주었다.
4. 데이터를 서버에 넘겨줌과 동시에 profilechange가 false로 변해 모달창을 닫히게 하고 loadProfile함수를 실행시켜 바로 바뀐 사진을 서버로부터 가져오게 해주었다.

5. loadProfile함수를 통해 axios요청으로 Token을 서버에 넘겨주면서 데이터를 가져옴과 동시에 화면에 바뀐 사진을 보여주게 하기 위해 데이터에 담긴 이미지url을 profileImg 값을 변경해 주었다. 

6. 프로필 페이지에 들어왔을때, 누구나 해당 유저의 프로필 사진을 볼 수 있도록 들어오면 바로 loadProfile함수가 실행되도록 하였다.

화면에 보여지는 이미지는 axios요청으로 인해 서버로부터 가져오기 때문에, axios로 요청을 받을 경로를 써주었다.

Mypage.js 마이페이지에서 프로필 사진 관련부분

Mypage.js 모달 관련부분

이렇게 하고, 아래의 사진을 보면 프로필 이미지가 성공적으로 변경되었음을 확인 할 수 있다.

프로필 사진 변경된 화면