[TIL] 2024-11-19 useEffect의 async await 사용

로직 설명

• 일단 전역상태로 deleteIdx가 존재한다. 이유는 각 그룹을 관리할 때 테이블 내에서 관리되고 있어서 각 row에 있는 "삭제" 버튼을 누르면 그 행의 데이터가 삭제되기 때문에 실질적으로 그 버튼을 누를 때까지는 어느 행이 삭제되어야 하는지 알 수 없기 때문이다.

const [deleteIdx, setDeleteIdx] = useState<string>();

• 삭제 버튼이 눌릴 때 setState 함수를 써서 삭제할 row의 정보를 전달해준다.

const handleDeleteGroup = async (groupId: number) => {
    setDeleteIdx(groupId.toString());
  };

• useEffect 문으로 deleteIdx가 변경되었을 때 감지하여 삭제 동작을 실행하는 함수를 실행하게 만든다.

  useEffect(() => {
    if (deleteIdx) {
      deleteRow();
    }
  }, [deleteIdx]);

• async/await 함수의 형태로 만들어서 실행시킨다.

  const deleteRow = async () => {
    showDialog({
      content: (
        <Box>
          <Box>해당 그룹을 삭제하시겠습니까?</Box>
          <Box>삭제 시 설정 된 고객사 그룹 설정은 삭제되지 않습니다.</Box>
        </Box>
      ),
      onConfirm: async () => {
        await deleteGroup();
        enqueueSnackbar('그룹이 삭제되었습니다.', { variant: 'success' });
        refreshGroups();
      }
    });
  };

💡thought

원래는 useEffect 문 자체에 async/await를 거는 방식도 있는 걸로 알았는데 말이죠?
꿈에서 봤나봅니다...
원래 이런 식으로 useEffect 구문 안에서 함수를 따로 정의해서 돌려야 한다고 했다.
내가 한 방식은 그냥 바로 위에 정의해서 돌려버린 것일 뿐 크게 차이는 없는 듯.
다 같이 모여있는 게 가독성을 위해서는 더 나을 것 같기도 하지만 또 어떤 측면에서는... useEffect 구문이 돌아갈 때마다 사용하지도 않는 함수가 계속 재정의 되어야 할 때도 있으니까 낭비이기도 할지도...
세상에 정답은 없네... 절레절레...

useEffect(() => {
  const fetchData = async () => {
    const data = await getdata();
    setUser(data);
  };
  fetchData();
}, []);