TIL 20211105 [항해99 51일차]

이미지 변경 없이 프로필 작성하기

고민한 문제 : 이미지 변경없이 수정할 경우 작성 완료시 오류가 발생

• 문제가 발생 한 이유
  file 같은 경우 state로 관리를 안해줘서 변경했던 이미지를 저장하는 것과 초기값 설정이 안 되있어서 서버에 formdata에 담아 요청보낼때 문제가 발생했다.

• 해결방안

// 변경 전 코드
 const addBtnClick = () => {
    const file = fileInput.current.files[0];
    const formData = new FormData();
    
    formData.append('profile', file);
    formData.append('userName', userName);
    formData.append('hashTagsStr', stack + ',' + hobby);
    formData.append('field', category);

    dispatch(editCardProfileDB(formData));
  };

// null 값 적용한 코드
 const [fileData, setFileData] = React.useState(null);
 
  const addBtnClick = () => {
    const file = fileInput.current.files[0];
    const formData = new FormData();
    
    if (fileData) {
      formData.append('profile', fileData);
    }
    formData.append('userName', userName);
    formData.append('hashTagsStr', stack + ',' + hobby);
    formData.append('field', category);

    dispatch(editCardProfileDB(formData));
  };

state의 초기값을 null로 줘서 이미지 변경이 없을 시엔 null이 서버로 보내져서 작성이 되게끔 변경했다. 그리고 서버측은 null을 받아도 프로필 수정이 되게끔 변경하는걸로 상의를 해서 문제를 해결했다.😁 아래 사진을 보면 이미지 변경없이 다른것만 변경하고 작성완료 해도 오류 없이 작성완료 되는 걸 볼 수 있다.