[2023-06-06] 이미지태거 오류 수정

시작!

어제 짠 코드를 오늘 서버와 연결해서 실행해보는데, 예상치 못한 오류가 생겼다.

항상 react를 사용할 때마다 문제가 되는 setState()의 비동기로 인한 오류가 또 발생했다..

 

아래의 코드를 보면 newImages 배열을 50개씩 쪼개서 서버에 전송하기 위한 부분을 구현했다.

 

여기서 모든 배열이 다 전송되면 로딩화면을 끝내야 하기 때문에, 이를 확인하는 부분이 sendImages()의 코드이다.

if (imageListNum == sendImageListNum + 1) {
  setDataLoadState(3);
  saveImages(newImages); // 전송한 캡쳐사진 저장
}
setSendImageListNum(sendImageListNum + 1);

 

위에서 미리 저장해 놓은 imageListNum과 지금까지 전송된 배열의 개수인 sendImageListNum을 비교하는 부분인데, 이게 App.js에서 작동하는게 문제인지, 아예  앱을 처음 실행하면 imageListNum과 sendImageListNum이 초기 값에서 변경되지 않는다.

앱을 이미 한번 작동 시킨 상태에서 새로고침하면 잘 되는걸로 봐서, 앱이 처음 실행되었을 때 state가 아직 준비가 안돼서 그런 것 같다.

 

 

해결!

이걸 어떡하지 하다가 

생각해보니까 구지 state를 쓸 필요가 없는 것이었다. 해당 값에 따라서 리랜더링이 되어야 하는 것도 아닌데 내가 왜 state로 만들었지?? 

리액트를 자주 쓰다보면 뭐든지 state로 만들게 되는 안좋은 습관이 생긴 것 같다.

앞으로는 잘 생각하면서 필요한 것 만 state로 만들어야 겠다.

 

아무튼 전부 let을 사용해서 변수로 선언했더니 이제 잘 작동된다.

(추가로 모든 캡쳐사진도 파라미터를 사용 안하고, 전역으로 선언해서 사용하기 위해 밖으로 같이 뺐다.)

  let imageListNum = 0; // 전송할 이미지 리스트 개수
  let sendImageListNum = 0; // 전송한 이미지 리스트 개수
  let allImages = []; // 기기의 모든 캡쳐사진
  let newImages = []; // 기기의 새로운 캡쳐사진

  React.useEffect(() => {
    const getPermissionAndSendImages = async () => {
      
      ...

      allImages = await readImages(); // 기기의 모든 캡쳐사진 가져오기
      newImages = await checkNewImages(allImages); // 새로운 캡쳐사진만 가져오기
      if (newImages.length == 0) {
        setDataLoadState(3);
      }
      const sliceLists = sliceImageList(newImages); // -> newImages 사진 배열 여러개로 나누기
      imageListNum = sliceLists.length;

      // 50개씩 잘라서 서버에 전송
      sliceLists.forEach(async newImages => {
        sendImages(newImages);
      });
    };

    getPermissionAndSendImages();
  }, []);

  const sendImages = async newImages => {
    const formData = getFormData(newImages);

    const config = {
      headers: {
        'Content-Type': 'multipart/form-data',
        userDeviceToken: fcmToken,
      },
    };

    setDataLoadState(2);
    customAxios
      .post('/images', formData, config)
      .then(data => {
        if (imageListNum == sendImageListNum + 1) {
          saveImages(allImages); // 전송한 캡쳐사진 저장
          setDataLoadState(3);
        }
        sendImageListNum += 1;
      })
      .catch(err => {
        setDataLoadState(4);
      });
  };