문제 상황
코드 간략 설명
cocktail: API 호출 응답 결과로 온 칵테일 정보가 담긴 state object
문제 상황 설명
API 호출하면 성공적으로 응답이 오는 걸 확인했는데 위 코드가 실행되면
이런 에러 메시지가 나온다.
원인
💡 API 호출은 비동기 작업이라 성공적으로 응답이 오기 전에 코드 다음 줄이 실행된다. 그래서 cocktail이 아직 null이어도 위 코드가 실행돼서 Uncaught TypeError가 발생했다. API 호출이 정상적으로 되었고 결국 성공 응답이 올 테지만 응답이 오기 전에 다음 줄이 실행해서 에러가 발생한 것이다.
해결 방법
cocktail 값이 유효할 때만 strInstructions 프로퍼티에 접근하도록 코드를 수정하면 에러가 없어진다.
이렇게 해도 되는데, 우리 코드의 경우는 값이 유효한지 체크하려고 cocktails object에 status라는 프로퍼티를 만들어 놓았다.
그러므로 status === LOADING &&를 이용해서 체크하는 게 좋다!
그 외 이야기
에러를 발생시킨 코드를 수정하지 않은 상태에서 다른 코드를 조금 수정했더니 에러가 사라지고 코드가 정상적으로 작동했다. 시간이 흘렀기 때문에 API 호출 응답이 성공적으로 왔기 때문인 것 같다 (확실하진 않음!)
✨