네트워크 로딩 처리하기

 

1️⃣ 로딩시 더보기 버튼 비활성화하기

① 현재 네트워크가 리쿼스트 중이면 true, 아니면 false값을 갖는 state 만들기

const [isLoading, setIsLoading] = useState(false); // 로딩 처리하는 state

 

② try~catch 구문 사용하기

const handleLoad = async (options) => {
    let result;
    try{
       // 리퀘스트 시작 전
      result = await getReviews(options); // response body에 있는 reviews라는 값을 Destructuring 하고
    }
    catch(error){
      console.error();
      return;
    } finally{ // 리퀘스트가 성공하거나 실패했을 때 실행 (오류가 나서 return하더라도 finally 블록은 실행됨!)
      setIsLoading(false);
    }
    
    const { reviews, paging } = result;
    if (options.offset === 0) {
      setItems(reviews); // offset값이 0일 때 items 전체를 바꾸고
    } else {
      setItems((prevItems) => [...prevItems, ...reviews]); // offset값이 0이 아닐 때는 spread문법으로 요소가 추가된 배열을 만들어 줌
    }
    setOffset(options.offset + reviews.length); // offset값 변경
    setHasNext(paging.hasNext);
  };

- 네트워크 리퀘스트 전 :  isLoading = true

- 네트워크 리퀘스트 후 :  isLoading = false

- 오류가 나서 return하더라도 finally 블록은 실행됨

- 네트워크 리퀘스트가 끝나면 항상 isLoading state값은 false가 될 것임

 

 

③ button에 prop으로 넘기기

{hasNext && <button disabled={isLoading} onClick={handleLoadMore}>더 보기</button>}

: 리퀘스트가 진행중일 때 버튼이 비활성화 됨!

 

 

 

2️⃣ state로 네트워크 에러 처리하기

🔎 리퀘스트가 실패할 경우
- 만약, 인터넷이 안좋아서 리퀘스트를 보내는 데 실패하는 경우
- 리퀘스트를 보냈지만 에러 리스폰스가 도착하는 경우

 

① getReviews에 throw 에러 던지고 콘솔 확인

throw new Error('버그가 아니라 기능입니다.');

🔽🔽🔽

 

 

② handleLoad 함수에 에러 처리하기

const [loadingError, setLoadingError] = useState(null);

- Error 객체나 null값을 가지는 state 만들기

 

try{
      setIsLoading(true); // 리퀘스트 시작 전
      setLoadingError(null);
      result = await getReviews(options); // response body에 있는 reviews라는 값을 Destructuring 하고
    }
    catch(error){
      setLoadingError(error);
      return;
    } finally{ // 리퀘스트가 성공하거나 실패했을 때 실행 (오류가 나서 return하더라도 finally 블록은 실행됨!)
      setIsLoading(false);
    }

- 리퀘스트 시작 전에 loadingError를 null로

- catch 구문에서 loadingError를 error로

 

{loadingError?.message && <span>{loadingError.message}</span>}

- error 출력 ==> 로딩 에러가 있을 때만 message 프로퍼티를 참조함!

🔎 Error 객체
- 에러 메세지를 담고 있는 message 프로퍼티가 있음

🔎 Optional Chaining 표기법 (?표기)

 

🔽🔽🔽

- 에러 메세지가 나타남!

 

 

 

3️⃣ 에러 범위 좁혀보기

① 리퀘스트를 보내는 주소를 일부러 잘못된 경로로 변경해보기

const response = await fetch(
    `https://learn.codeit.kr/error/film-reviews?${query}`
  );

 

 

🔽🔽🔽

- 404 리스폰스 도착

- JSON 문자열이 잘못됐다는 에러메세지 나타남

 

 

② 오류가 나는 경우에 리스폰스가 성공했는지 체크해보기

if(!response.ok){
    throw new Error('리뷰를 불러오는데 실패했습니다.');
  }

🔽🔽🔽