[React.JS] Fetch문 Try-Catch로 Error handling하기, Async-Await로 가독성 개선하기

Fetch문은 필수

프로젝트에서 Fetch문은 당연히 필수적으로 사용하는 부분입니다. 근데 이 Fetch문에서 문제가 생기는 경우가 많다는 걸 조금씩 깨닫고 있습니다. Fetch가 끝나지 않았는데 존재하지도 않는 데이터로 map()함수를 돌린다던지....(이전 포스팅) 등등 BE-FE의 통신 부분인 Fetch문이 굉장히 중요합니다.

그렇다면 FE에서도 이런 Fetch문을 그냥 둘수는 없지 않을까요? BE에서 여러가지 경우의 수를 생각하며 Validation과 Try-Catch문에 힘을 쓰는데, 우리도 Fetch에서 에러가 났을 때 확인도 하고, 처리도 할 수 있도록 해야 하지 않을까요?

단순 Fetch 코드

useEffect(() => {
  fetch('/data/releaseProducts.json')
    .then(response => response.json())
    .then(data => {
    setProductsList(data);
   });
}, []);

Try-Catch, Async-Await로 묶어 준 개선 코드

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('/data/releaseProducts.json');

        if (!response.ok) {
          throw new Error('서버가 이상합니다.');
        }

        const data = await response.json();
        setProductsList(data);
      } catch (error) {
        throw new Error(`에러가 발생했습니다. ${error.message}`);
      }
    };

    fetchData();
  }, []);

솔찍히 Try-Catch문 자체가 이쁜코드와는 멀도록 만드는 ugly 코드지만 (개인적 의견입니다😭 뭔가 더 이쁜 개선책이 나왔음 좋겠습니다...ㅎㅎ) 그래도 올바른 동작을 위해서라면 에러를 잘 Catch해야겠죠..?
다행인건 async-await으로 .then().then() 없앤건 확실히 더 보기 좋은것 같습니다.

끝~!

도움 받은 링크

How to use async functions in useEffect (with examples)
과제 테스트 해설