최종 프로젝트 19일 차 @작성한 후기 데이터를 모아서 한 번에 submit하기

오늘 아침에 팀원들에게 상담해본 결과 작성한 후기 데이터를 모아서 한 번에 submit 하는 기능으로 구현하기로 했다. 이를 위해서는 submit하는 데이터를 모아서 관리하는 state를 선언할 필요가 있고, 이 submit 데이터를 언제, 어떻게 변화시킬 지도 잘 생각해야 한다. 

 

state 선언

먼저 submit 데이터는 initialArr를 선언하고 이를 초기값으로 지정해서 state를 선언했다. 

 

아래 코드에서 initialArr는 데이터의 양을 지정하고, type submit은 데이터의 형식을 지정하여 데이터를 관리하기 편리하게 해주었다. 

export type submit = {
  warmer_id: string;
  warming_user_id: string;
  party_id: string;
  temperature: number;
  comment: string[];
};

const initialArr: submit[] = Array.from({ length: memberData.length }).map((n, i) => {
    return {
      warmer_id: userId,
      warming_user_id: memberData[i].user_id,
      party_id: partyId,
      temperature: 0,
      comment: []
    };
  });
  
const [submitArr, setSubmitArr] = useState<submit[]>(initialArr);

setState

위의 initialArr 선언과 type submit 선언을 기반으로 하여서 편하게 setState로 데이터를 변환할 수 있다.

 

initialArr는 배열 형태이므로 current 상태값 배열을 map으로 돌려서 if문으로 내가 원하는 값만 변화시킨 뒤 그 결과값을 저장하면 된다. 

setSubmitArr((current) => {
  const data = current.map((n) => {
  // 내가 변경하기 원하는 값일 때
    if (n.warming_user_id === memberId) {
    // 값을 저장해줌
      return {
        warmer_id: userId,
        warming_user_id: memberId,
        party_id: partyId,
        temperature: score,
        comment: [...commentArr, comment]
      };
    }
    return n;
  });

// 변경한 data를 state에 저장해줌
  return data;
});

submitHandler

그리고 이렇게 저장한 후기 작성 정보들은 초기값이 아닌 정보들을 선별해서 해당 정보들만 비동기 통신을 하도록 한다. 또 Promise.all 메서드를 통해 모든 처리가 끝나는 것을 기다린 뒤 다음 함수가 실행되도록 하였다. 

  // 내가 후기를 작성한 정보들
  const done = submitArr.filter((n) => n.temperature !== 0);

  const submitHandler = async () => {
  // 후기를 작성한 정보들만 비동기 통신
    const submitPromises = done.map(async (submitInfo) => {
      const { error } = await browserClient.from('warming').insert({ ...submitInfo });
      if (error) {
        console.log(error.message);
      }
    });
    
    // 비동기 처리가 끝나는 걸 기다림
    await Promise.all(submitPromises);
  };