만약 인터넷이 안좋아서 리퀘스트를 보내는데 실패하거나
리퀘스트를 보냈지만 에러리스트를 보내는 경우 어떻게 될까?
잘못된 값으로 State 값으로 변경하려고 시도하거나
심한 경우에는 동작이 멈출 수 있다.
리퀘스트를 보낼 때는 이런 것들을 고려해서 에러 처리를 해주는 것이 안전하다.
State를 활용해서 네트워크 에러 처리하기
throw 키워드를 써서 에러를 던지고
App 컴포넌트의 try catch문에서 console error출력을 해주고있어
콘솔에 에러가 출력된다.
loadingError State를 만든다.
이 State는 에러 객체나 null값을 값으로 가질 것이다.
그리고 handleLoad 함수에서 리퀘스트를 시작하기 전에loadingError를 null로 만들어주고
catch 블록에서는 콘솔 출력 대신에
loadingError State를 error값으로 변경해준다.
try 블록에서 에러 스테이트를 초기화하고
로딩 스테이트는 true 로 만들어준다.
catch 블록에서 에러 스테이트를 변경하고 함수 실행을 끝내기 위해서 리턴
finally 블록에서는 다시 로딩 스테이트를 false 로 만든다.
이렇게하면 catch 블록에서 함수가 종료되었을 때도
로딩 스테이트가 false 로 변경
그리고 에러를 출력해주기 위해
에러 객체에는 에러 메시지를 담고있는 message라는 프로퍼티가 있다.
이 값이 있을 때만 span태그로 랜더링해준다.
(참고)
여기서 ? 물음표는 옵셔닝 체이닝이라는 표기법
로딩에러가 있을때만 message 프로퍼티를 참조하게 된다.
에러 범위 좁혀보기
api.js에서 잘못된 경로로 바꾸어보겠다.
그러면 404 response가 도착하고
에러 메시지에는 json문자열이 잘못되었다고 뜬다.
api.js파일에서 getReviews함수를 보면 response와는 상관없이 항상 json 메소드를 실행하고 있었다.
response 객체에 ok라는 프로퍼티를 활용해서 오류가 나는 경우에는
response가 성공했는지 체크하고 에러를 던지면
작성한 오류메시지가 잘 보이게 된다.
try catch에서 에러를 받아온 다음에
에러 상태를 리액트 State로 관리하면서 보여줄 수 있다는 것
