국비 83일차

JAY·2023년 1월 19일
0

국비 공부

목록 보기
78/86

api를 통한 비동기 통신 시간차 발생

axios로 비동기 통신하여 json 데이터를 받아와서 뿌리려는데 시간이 걸린다...

처음엔 더 심각했지만 useCallback 함수를 사용한 후에 좀 더 안정적으로 콘솔에 찍혔다

그러나 첫 페이지 랜딩 시 데이터를 받아오는 데 시간이 걸려서
처음엔 null이 나오고 그 다음에서야 데이터가 나오는 문제점을 발견했다

이 때문에 변수가 들어있는 태그가 들어오면 오류가 나고 없으면 화면이 보인다

해결!!

그래서 h2 안에 있는 변수에다가 조건식을 넣어야겠다고 생각해서 실행해보았다
(useCallback 식도 원래대로 짧게 해보았다)

새로고침해도 오류 없이 잘 들어왔다!!

아침부터 계속 잡고 있었는데 너무 뿌듯하다...
기쁘다..................ㅠㅠ

(useEffect에 의존성배열 axiosData삭제했더니 경고가 뜬다... 넣는 게 나을수도!!
넣어도 안 넣어도 상관 없다면서 왜 그러는거)

https://dev.to/jasmin/how-to-use-async-function-in-useeffect-5efc

useCallback 사용 시 가장 도움이 됐던 사이트!!

0개의 댓글