[React] Axios 로딩 문제

문제점

Async, Await를 사용했지만 동기처럼 보여지게 해주는 비동기처리식일뿐 실제로 동기는 아니다. 그래서 서버에서 데이터를 받아오기 전에 랜더링이 되었다. 랜더링이 될때 서버에서 정보를 받아오지 않았기에 오류가 생겼다. 이 부분을 Axios Loading을 만들어 해결 할 수 있다.

프로젝트 적용(LibertyForm)

function Dosurvey() {

    const [surveyDetail, setSurveyDetail] = useState(null) //axios를 통해 받아오는 설문 상세 정보 state
    const [loading, setLoading] = useState(false) // axios에서 정보를 받아오고 랜더링하기 위한 상태 state
    const [error, setError] = useState(null) // 에러발생시 에러를 저장할 수 있는 state

    useEffect(() => {
      setLoading(true)
      const jwt = localStorage.getItem('jwt')
      axios.get(`/survey/${params.surveyId}`, {
        headers: {
          Authorization: 'Bearer ' + jwt
        }
      })
        .then((res) => {
          setLoading(false)
					setSurveyDetail(res.data.result)
        })
        .catch((Error) => {
          setError(Error)
        })
    }, [])
  

    if (loading) return (
      <div>로딩중...</div>
    )
    if (error) return (
      <div>에러 발생..{error}</div>
    )
    if (!surveyDetail) return (
      null
    )
    return(
        <>test</>
    )
  
}

• state를 3개 만든다
  • axios에서 받아온 정보를 저장하는 state
  • loading 상태를 관리할 수 있는 state
  • error 정보를 담을 수 있는 state
• 식이 실행되어 질때, setLoading(true)로 변경해 아래 if문에서 loading이 true일 경우 로딩중…이라는 멘트가 리턴 될 수 있도록 한다.
• 만약 Error가 발생한다면 에러 정보를 에러 state에 저장하고 리턴값으로 보여준다.
• surveyDetail이 만약 false라면 즉, 아무 값도 가져오지 못하고 있다면 리턴값으로 null
• axios가 정상적으로 수행되었다면 then이 실행되고 Loading을 false로 바꿔주면서 메인 return 문이 실행되어 정상적으로 작동하는 것을 볼 수있다.