closedAt을 가지고 dispatch에 isClosed를 넣는 방법 선택(동기/비동기)

2월 16일 추가된 내용

1. Promise는 미래에 들어올 값을 넣어야 할 때 쓰는 것이다. 따라서 이미 결정된 값을 처리하는데 쓰는 건 적절하지 않다. 처음 아이디어부터 잘못되었다!
2. isClosed 는 서버쪽에서 보내줘야 하는 값이다. 왜냐하면 프론트에서 계산을 했을 때 계산이 잘못될 가능성이 있기 때문이다. 이 문제를 고민할 당시에는 isClosed를 response로 보내주는 api가 완성되지 않아서 이렇게 사용했지만 현재는 기능이 완성되어서 isClosed: boolean을 서버에서 받아온 값으로 사용하고 있다!

이하는 이전 작성 내용

1. 원인 : 서버에서 넘어오는 데이터에는 투표가 끝나는 closedAt 날짜만 있고 이 투표가 종료됐는지 종료되지 않았는지 상태는 표시되어있지 않았다. 프론트에서 이 부분을 계산해서 투표의 종료/진행중을 전역상태로 만들어줘야 했는데 이 과정에서 데이터를 어떻게 처리할 것인지 고민하게 되었다.

2. 선택해야하는 부분

   • boolean 값을 만드는 방법 2가지
     dday를 계산하는 함수가 이미 작성되어 있기때문에 이걸 재사용해서 결과값이 빈스트링('')이면 isClosed: true를 만드는 방법과 현재 날짜를 new Date로 가져와서 날짜를 비교해보는 방법
   • 디스패치로 넣는 방법 2가지
     결과값을 Promise로 만들어서 boolean 값을 resolve로 만들어주고 프로미스가 종료되면 dispatch에 넣는 방법(비동기) 계산된 Dday 값 아래에 디스패치에 넣어주는 코드를 작성(동기)하는 방법

3. 결과

   • Date 객체를 사용하면 데이터를 다시 변경해야하는 중간과정이 추가되므로 시간을 단축하기 위해서 이미 있는 Dday 계산함수를 재사용하기로 하였다.
   • 동기적으로 처리하면 디스패치에 정확하게 값이 들어가지 않을 수 있기 때문에(undefined) Promise로 만든 다음 순차적으로 넣으면 정확하게 들어가지 않을까 생각했다.
   • 1차 결과는 다음과 같다

const _promise = (params: string): any => {
    return new Promise(function (resolve, reject) {
      if (params.length === 0) {
        resolve(true);
      } else {
        resolve(false);
      }
    });
  };
useEffect(() => {
   // ...생략
          const dday = CalcDday(res.data.closedAt);
          console.log(res.data);
          _promise(dday).then((response: boolean) => {
            dispatch(
              getCurrent({
                isAuthor: res.data.isAuthor,
                isVoted: res.data.isVoted,
                isClosed: response,
              }),
            );

문제는 페이지 로딩시간이 길어진다는 점이었다. 새로고침을 한 뒤 로딩 컴포넌트가 보이는 시간이 길어서 코드를 동기적 처리로 수정하고 값이 정확하게 들어오는지 확인해봤다

데이터가 잘 들어오는 것을 확인하고 코드를 최종적으로 다음과 같이 수정하였다.

//api요청
  useEffect(() => {
   //...생략
          const dispatchCurrentObj = {
            isAuthor: res.data.isAuthor,
            isVoted: res.data.isVoted,
          };
          const dday = CalcDday(res.data.closedAt);
          if (dday.length === 0) {
            dispatch(
              getCurrent({
                ...dispatchCurrentObj,
                isClosed: true,
              }),
            );
          } else {
            dispatch(
              getCurrent({
                ...dispatchCurrentObj,
                isClosed: false,
              }),
            );
          }


  // redux
  const { isClosed, isAuthor, isVoted } = useSelector((state: any) => state.currentVote);