-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
해결됨
Axios 라이브러리를 활용한 HTTP 요청 부분에 대해 질문드립니다.
21.10.04 00:41 작성 조회수 380
1
안녕하세요. 좋은 강의 잘 듣고 있습니다!
Axios 라이브러리를 활용한 HTTP 요청 부분에 함수형으로 작성해 보았는데요.
api가 달라졌는지 mr-robot은 응답이 없어서 다른 드라마로 했고 객체 하나로 응답을 받았습니다.
코드는 아래와 같습니다.
아래 코드에서 episodeObj와 episodeObj.image 까지는 웹페이지 출력이 잘 되는데요.
주석처리 한 것 처럼 medium을 할당 하거나 episodeObj.image.medium으로 접근하면
Cannot read properties of undefined (reading 'medium')
이런 오류가 발생합니다. 어떻게 해결 할 수 있는지 궁금합니다.
답변을 작성해보세요.
1
이진석
지식공유자2021.10.04
mr-robot 검색결과가 null이군요. 알려주셔서 감사합니다.
useEffect 수행과 axios.get 요청은 비동기 동작입니다. 그렇기에 23라인~28라인에서 episodeObj 상탯값을 통해 렌더링할 때, axios.get 응답을 받기 전 일 수 있습니다.
axios.get 응답을 받기 전에는 episodeObj 상탯값은 {} 이며, 이때 episodeObj.name과 episodeObj.image는 undefined가 됩니다. 여기까지는 오류가 발생하지 않는 데, episodeObj.image.medium 에서는 undefined인 episodeObj.image를 통해서 medium을 참조했기 때문에 말씀하신 TypeError "Cannot read properties of undefined (reading 'medium')" 예외가 발생하는 것입니다.
객체 비구조화 문법에서는 이 경우를 대응하기 조금 까다롭고, 이는 Optional Chaining 문법을 쓰시면 간결하게 해결하실 수 있습니다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining
episodeObj.image.medium 대신에 episodeObj.image?.medium 이라고 쓰시는 거죠.
혹은 axios.get 응답 이후에 episodeObj를 활용해서 렌더링이 되도록 플래그를 세팅해서 처리해보실 수도 있습니다.
endymion cheon
질문자2021.10.04
몇 시간 동안 검색해도 해결 못했었는데 ㅠㅠ 간단히 잘 해결 되었습니다!
감사합니다~! 지금까지 들어본 최고의 django 강의입니다!
앞으로도 다른 좋은 강의 많이 부탁드립니다. (음.. FastAPI? 아직 강의가 없더라고요..)
즐겁고 행복한 하루 보내세요.
답변 1