react에서 setTimeout을 이용한 비동기 처리

const FollowerProfileHome = () => {
  const params = useParams();

  const [userNo, setUserNo] = useState("");
  //loading
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!userNo) {
      setTimeout(() => {
        setLoading(false);
      }, 500);
    }

    axios
      .get("/post/followerPost", {
        params: {
          userNickName: params.memberNickName,
        },
      })
      .then((res) => {
        console.log(res.data);
        setUserNo(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

  console.log(params.memberNickName);

  if (loading) {
    return (
      <Box
        sx={{
          px: "24px",
          height: "100vh",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          pt: "24px",
        }}
      >
        <Typography const="h1">Loading</Typography>
        <CircularProgress />
      </Box>
    );
  }

  return (
    <Box sx={{ px: "24px", pb: "70px" }}>
      <FollowerProfile />
      <ProfileView />
      <ProfilePost userNo={userNo} />
    </Box>
  );
};

<ProfilePost /> 태그 안에 user번호를 넘겨주면 해당 user의 post를 불러오는 axios요청이 들어있었다.

이를 재사용하기 위해

react-router-dom에 들어있는 useParams() hook으로 user의 이름을 가져오고, 이름을 번호로 변환하는 axios요청을 보낸 후 그 결과값을 ProfilePost에 props값으로 넘겨주고 싶었다.

이때 useEffect()함수 안의 요청은 비동기로 처리 되어 axios로 요청된 결과값이 jsx가 return되고 나서 불러와져 post들이 로딩되지 않았다.

이를 해결하기 위해 loading 상태값을 추가한 후,
setTimeout함수를 이용해 loading이 true일 동안 Loading을 표시하는 화면을 return하고 일정 기간 지난 후에는 axios로 요청된 값이 전달된 jsx를 return하도록 위와 같이 수정하였다.