[TIL] 비동기 호출 처리 - 로딩화면 만들기

useEffect로 불러오는 데이터를 map함수로 처리하는데 error 가 발생했다.

useEffect(()=>{
    getUserTags(today)
  },[])

  return(
      <StTagsWrap>
        <StTagTitle>
          진행 중인 습관
        </StTagTitle>
        {
          stillTags.map((stillTag, tagName)=>{
            return (

비동기 호출로 인해서 데이터가 오기 전에 map 함수가 실행되고, 불러와진 데이터가 없으니 에러가 나는 것 아닐까 예상했다.

지지난 프로젝트부터 로딩화면을 만들어보고 싶었기 때문에 겸사겸사 로딩화면을 제작해서 에러를 해결하려고 계획했다.

const Loading = () => {
  return(
    <StLoadingBackground>
      <StLoadingWrap>
        <img src={spinner} alt="로딩 중..."/>
        <StLoadingTxt>로딩 중...</StLoadingTxt>
      </StLoadingWrap>
    </StLoadingBackground>
  )
}
export default Loading

나중에 디자인이 완성됐을 때를 감안해 심플하게 만들었다.

// true일 경우 로딩화면이 보여진다
const [loading, setLoading] = useState(true);

(..중략..)

    .then((res) => {
      setStillTags(res.data[0].stillTags)
      // axios 요청 후 데이터를 다 받아오면 로딩화면이 사라진다
      setLoading(false)
    })
    
(..중략..)

//loading이 true가 되기 전까지 map함수가 실행되지 않는다 → 오류 해결
      {loading ? <Loading /> :
      <StTagsWrap>
        <StTagTitle>
          진행 중인 습관
        </StTagTitle>

막상 이렇게 만들고나니 내가 만든 로직이 잘 먹힌 건지...
아니면 아까 서버 장애가 있어서 문제가 생긴 건지 파악이 안 된다....
로딩화면을 빼면 다시 에러가 나는 걸 보니 잘 만든거같당 히히

어쨌든 만들어놓은 로딩화면은 잘 써먹어야징

목이랑 어깨랑 떨어져나갈거같다~~~😭 살랴줘...