너 리액트 앞에서 장난질이냐, 페이지 재렌더링

문제

inNail프로젝트의 헤더에 유저프로필 이미지를 띄우고, 회원정보 수정 시 유저프로필도 수정할 수 있도록 기능을 구현했다. base64 형태로 가공하여 등록을 요청하고, 백엔드에서 AWS S3에 등록하여 해당하는 주소값을 반환하는 방식이다.

구현 과정에서 프로필 이미지를 저장하는 AWS S3에 파일을 저장하고 있던 기존 이미지 파일을 삭제하고, 새로운 파일을 등록하는 방식이 아니라 기존 등록된 값에 이미지 파일 내용만 업데이트 하는 방식으로 구현되었다. 그 결과 이미지의 주소값이 바뀌지 않고, 헤더의 유저프로필 역시 재렌더링 되지 않는 문제가 발생했다.

원인 예측

리액트가 리덕스를 통해 전역으로 관리하는 유저정보가 갱신 되었다고 판단하지 않기 때문이다. 강제로 렌더링을 시켜주거나, 다른 정보를 같이 전달하여 변화를 인지하도록 해야한다.

해법 나열

1. 강제 재렌더링을 위한 window.location.reload()함수 호출
2. 헤더에서 useSelector에서 auth 값을 한번에 조회하고, 유저정보가 수정될 때마다, 수정된 다른 값을 참고하여 재렌더링
3. 회원정보 수정 시 전송하는 base64 값을 리덕스로 전달하여 유저 프로필에 반영

적용

1. SPA로 개발된 웹 앱이므로, 새로고침 상황이 이질적인 경험을 제공하였으며, 화면 자체를 새로그리는 과정에서 API가 다시 호출되었다.

2. 회원정보를 수정하더라도 response에서 받는 값이 전혀 바뀌지 않을 수 있다. 때문에, 이 방법으로 해결하려면 값이 수정되었다는 것을 표기해주는 특정 값을 새로 생성해야 한다.

3. 헤더가 변화를 원활히 인식하며, base64값을 그대로 반영한 이미지를 성공적으로 띄웠다.

결과

유저 사용성에 문제 없이 헤더를 업데이트 시키게 되었다.

마무리

당황하 않고 해결