문제 상황
팀프로젝트를 하던 도중 회원가입하는 코드를 짜고 있었다. 회원가입쪽에서 가입하는 유저의 프로필 이미지를 받을 때 사용자가 이미지를 등록해야만 사진 제거 버튼이 화면에 나오도록 로직을 썼다. 그래서 리액트 훅 폼의 watch 함수로 등록한 프로필 사진이 존재하는지의 여부를 props로 넘겨줘서 프로필 이미지 값이 존재하면 사진 제거 버튼이 나오고, 값이 존재하지 않으면 사진 제거 버튼이 나오지 않도록 구현했는데 테스트를 하다 보니 사진을 아직 등록하지 않았는데 사진 제거 버튼이 뜨는 문제가 발생했다.
해결 과정
그래서 콘솔에 !!watch(”profileImage”)를 찍어보았다. 분명 처음 렌더링시에는 false로 나오다가 리렌더링이 발생하면 사진을 선택하지 않아도 true로 바뀌어버린다. 그래서 boolean값이 아닌 watch(”profileImage”)를 확인해보니 처음엔 undefined였고 리렌더링시에 FileList {length: 0}length: 0[[Prototype]]: FileList 이런식으로 객체로 나오게 됐다.
문제가 발생한 이유
이렇게 되는 이유는
<input type="file"> 요소가 생성될 때 FileList 객체를 초기화하기 때문인데, 빈 상태라도 FileList 객체로 초기화되어 리렌더링이 발생할 때 React Hook Form의 watch 함수가 이 빈 객체를 감지하게 된다.
기본적으로 FileList는 사용자가 파일을 선택하지 않으면 빈 상태로 유지된다.
하지만 리렌더링 시 FileList 객체 자체는 존재하기 때문에 undefined 대신 FileList {length: 0} 형태로 나타나게 된다.
문제 해결
undefined이든 객체형태든 사진을 등록하지 않으면 false를 전달해주기 위해 props로 내려준 코드에 ?.length를 붙여 수정했다.
isProfileSet={!!watch("profileImage")?.length}
