[React] useMemo 사용으로 인한 삽질기

문제상황

- 드롭다운과 콘텐츠 영역이 있음 (드롭다운 안의 option들은 api reponse로 받아온 data)

- 드롭다운을 바꿀 때, 진짜 바꿀 거냐고 한 번 물어봐주는 confirm창이 뜸

- confirm에서 확인을 누르면 콘텐츠 영역이 해당 내용으로 교체 / 취소누르면 기존 콘텐츠 영역에 그대로 남아있어야 함

 

동작하길 바랐던 플로우

 

 

 

- 하지만 드롭다운에서 '세번째 것'을 선택하면 컨펌창이 뜨고, 콘텐츠영역에는 기존 데이터인 '두번째 것'이 남아있지만...

select 영역의 텍스트가 새로 선택한 '세번째 것'으로 곧바로 바뀌어버렸다.

제목은 '세번째 것'이지만 콘텐츠는 '두번째 것'이 렌더링되는 상태

 

 

드롭다운의 options를 구성하는 부분

  const { data: siteData } = useGetSiteList();
  
  const siteOption = useMemo(() => {
    return siteData?.data.map((site) => ({
      label: site.siteName,
      value: site,
    }));
  }, [siteData]);

 

위와 같이 구성하고 있었는데, 이전에 연산한 siteOption값을 재사용하기위해 useMemo로 감싸준 게 문제였다.

 

api data가 변하지 않았으니 컨펌창이 뜨기 전에 드롭다운 select 영역이 바로 바뀌어버렸던 것.. useMemo를 없애니 해결됐다.