22.01.20 Error Handling

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

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

### 에러 핸들링 방법
<수정 전 코드>
리액트는 상태 업데이트를 쉽게 하기 위해 useState Hook을 개발할 정도로 상태 관리에 신경 쓴 라이브러리이다.
하지만 나는 리액트에 대한 이해가 부족했던 터라 요소의 상태를 너무나 어렵게 바꿔주고 있었다.
```js
// 아티클을 삭제 하는 함수
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이 자식 컴포넌트가 된다.
내가 짠 코드는 자식이 부모에게 '일단 지웠으니까 나머지는 엄마아빠 쪽에서 해결해줘!' 하는 코드였다. 물론 그 보다 더한 상태긴 하지만..

<수정 후 코드>
```js
// 아티클을 삭제 하는 함수
// 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 하나가 사라졌다.

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