📜

23년 5월 3일 흑우집합소 개발노트 (React에서 useState의 상태 처리)

2023.05.04

thumbnail

React에서 상태 관련 처리를 하다가…

신규 기능 생성번호 당첨내역을 개발하고 있었다.
백엔드 로직 개발을 하고, 프론트쪽 개발로 넘어왔다.

각 로또 등위별 당첨 내역 처리를 위해 아래와 같은 상태 값을 사용했다.

const [rankInfo, setRankInfo] = useState<RankSummary>({
  firstRankCnt: 0,
  secondRankCnt: 0,
  thirdRankCnt: 0,
  fourthRankCnt: 0,
  fifthRankCnt: 0,
});

위 상태 값은 아래의 등위별 당첨 내역의 카운트에 쓰인다.

저 등위별 당첨 내역은 컴포넌트로 따서 구현되어 있다.
컴포넌트에서는 useEffect hook을 이용해서 초기 값을 설정해준다.

useEffect(() => {
  const makeLogData = winData.lottoMakeLogData;

  setRankInfo({
    firstRankCnt: 0,
    secondRankCnt: 0,
    thirdRankCnt: 0,
    fourthRankCnt: 0,
    fifthRankCnt: 0,
  });

  makeLogData.forEach((item) => {
    if (item.rank === 5) {
      setRankInfo({
        ...rankInfo,
        ...{ fifthRankCnt: rankInfo.fifthRankCnt++ },
      });
    } else if (item.rank === 4) {
      setRankInfo({
        ...rankInfo,
        ...{ fourthRankCnt: rankInfo.fourthRankCnt++ },
      });
    } else if (item.rank === 3) {
      setRankInfo({
        ...rankInfo,
        ...{ thirdRankCnt: rankInfo.thirdRankCnt++ },
      });
    } else if (item.rank === 2) {
      setRankInfo({
        ...rankInfo,
        ...{ secondRankCnt: rankInfo.secondRankCnt++ },
      });
    } else if (item.rank === 1) {
      setRankInfo({
        ...rankInfo,
        ...{ firstRankCnt: rankInfo.firstRankCnt++ },
      });
    }
  });

  setRankInfo(updatedRankInfo);
}, [winData]);

근데 이렇게 했더니 계속 값이 증분했다.
앞에 초기화 로직을 줬지만 적용되지는 않았다.

왜 그런걸까?

이 부분을 찾아보니…
아래와 같이 정리할 수 있었다.

useState hook은 비동기로 동작하기 때문에 setRankInfo가 호출되어도 rankInfo는 즉각적으로 업데이트 되지 않는다.
그래서 이를 해결하려면 이전상태를 복사한 값을 적용함으로써 해결할 수 있다.

말이 좀 어려운데 아래 솔루션 코드를 보면 알 수 있다.

useEffect(() => {
  const makeLogData = winData.lottoMakeLogData;

  // 새로운 객체를 생성하여 상태 업데이트를 수행합니다.
  const updatedRankInfo = {
    firstRankCnt: 0,
    secondRankCnt: 0,
    thirdRankCnt: 0,
    fourthRankCnt: 0,
    fifthRankCnt: 0,
  };

  makeLogData.forEach((item) => {
    if (item.rank === 5) {
      updatedRankInfo.fifthRankCnt = updatedRankInfo.fifthRankCnt + 1;
    } else if (item.rank === 4) {
      updatedRankInfo.fourthRankCnt = updatedRankInfo.fourthRankCnt + 1;
    } else if (item.rank === 3) {
      updatedRankInfo.thirdRankCnt = updatedRankInfo.thirdRankCnt + 1;
    } else if (item.rank === 2) {
      updatedRankInfo.secondRankCnt = updatedRankInfo.secondRankCnt + 1;
    } else if (item.rank === 1) {
      updatedRankInfo.firstRankCnt = updatedRankInfo.firstRankCnt + 1;
    }
  });

  setRankInfo(updatedRankInfo);
}, [winData]);