22.01.20 Error Handling

[hellohyonee]

어떤 에러인가요?

• MyPage에 articleList의 상태 업데이트가 제대로 되지 않아서 DELETE를 서버에 요청한 후 reload()함수를 사용했다.

에러 메시지

에러 메세지가 뜨지는 않았지만 새로고침이 되어서 사용자의 화면이 불필요한 렌더링으로 약간의 기다림이 생겼다.

에러 핸들링 방법

<수정 전 코드>
리액트는 상태 업데이트를 쉽게 하기 위해 useState Hook을 개발할 정도로 상태 관리에 신경 쓴 라이브러리이다.
하지만 나는 리액트에 대한 이해가 부족했던 터라 요소의 상태를 너무나 어렵게 바꿔주고 있었다.

// 아티클을 삭제 하는 함수
  const deleteArticle = () => {
    axios
      .delete(`http://server.bookdam.link/article/${userInfo.id}?article_Id=${myArticleInfo.id}`)
      .then((data) => {
        document.location.reload();
      })
      .catch((err) => {
      
      });
  };

이 함수는 MyPage에서 구동이 되는 SentenceModal의 함수이다.
MyPage가 모든 정보를 보내주는 부모 컴포넌트이고 SentenceModal이 자식 컴포넌트가 된다.
내가 짠 코드는 자식이 부모에게 '일단 지웠으니까 나머지는 엄마아빠 쪽에서 해결해줘!' 하는 코드였다. 물론 그 보다 더한 상태긴 하지만..

<수정 후 코드>

// 아티클을 삭제 하는 함수
// MyPage에서 props로 받은 것 : setIsOpenSentenceModal, updateMyArticles, myArticleList

  const deleteArticle = () => {
    const tempMyArticleInfo = {
      id: myArticleInfo.id,
      book_Title: myArticleInfo.book_Title,
      book_Author: myArticleInfo.book_Author,
      book_Publisher: myArticleInfo.book_Publisher,
      sentence: myArticleInfo.sentence,
      comment: myArticleInfo.comment,
      createdAt: myArticleInfo.createdAt
    };
    axios
      .delete(`http://localhost:4000/article/${userInfo.id}?article_Id=${myArticleInfo.id}`,
        {
          articleInfo: tempMyArticleInfo
        },
        {
          headers: { 'Content-Type': 'application/json' }
        }
      )
      .then((data) => {
        if (data.status === 200) {
          setIsOpenArticleNotice(false);
          setIsOpenSentenceModal(false);
          updateMyArticles(
            myArticleList.filter(
              article => article.id !== data.config.articleInfo.id
            ));
        }
      })
      .catch((err) => {

      });
  };

일단 코드의 길이부터가 달라졌다. 자식이 부모에게 받은 것을 할 수 있는 만큼 정리해서 보내고 있다.
부모(MyPage)에게서 myArticleList와 updateMyArticles함수를 받아서 상태를 업데이트 시켜줬다. updateMyArticles이 함수에는 setMyArticleList함수가 심어져 있다.
상태 업데이트를 요청하기 전에 자식(SentenceModal)이 처리되는 데이터의 형식을 잡아준 후에 부모에게 넘겼다.

이렇게 상태를 처리하고 나니 더 이상 페이지가 새로고침이 되는 불편한 현상은 사라졌고 삭제 확인 버튼을 누르면 자연스럽게 article 하나가 사라졌다.

이 외에도 몇 가지가 상태 관리를 무시하고 처리된 것들이 있어서 정리중에 있다.