[Error] react 비동기 요청시 주의할 점(loading indicator가 필요한 이유)

어떤 에러인가요?

클라이언트 app.js에서 서버의 userinfo엔드포인트로 유저 정보와 유저의 포스트 리스트를 받아와서 프롭스로 마이페이지 사이드바에 내려줬다.
그런데 비동기 요청이 끝나기도 전에 초기 렌더링이 진행되면서 유저 인포를 사용한 리턴값이 깨지는 에러가 났다.

에러 메시지

cannot read ~~ of undefined

에러 핸들링 방법

axios 요청을 마이페이지 사이드바로 옮기고, isloading이라는 상태를 만들어서 useEffect로 서버에 새로 요청 보낼 때마다(새로고침, 초기 렌더링 등)isLoading을 true로 설정하고 요청이 완료됐을 때 then 콜백 함수 안에서 isLoading을 다시 false로 바꿔주었다.
그리고 삼항연산자로 isloading 값에 따라 return문 안의 값이 렌더링되게 만들었다.