22.01.21 Error Handling

### 어떤 에러인가요?
- 지난 에러핸들링에서 SetState 상태관리 함수의 동기적 처리를 위해 사용한 useEffect 메서드에서 발생한 에러

### 에러 메시지

### 에러가 발생한 코드

### 에러 핸들링 방법
- 해당 에러는 useEffect가 이미 랜더링 전에 지나가버린 페이지에서도 실행될 때 뜨는 경고로, 기능적으로는 작동하나 성능적으로 메모리 누수가 일어난다는 뜻이므로 에러를 처리해야함.
- 해당 에러 문구 마지막에 cleanup Function을 검색해보면 수많은 핸들링 방법이 나오는데, 먼저 공식문서를 참고해보았습니다.
```js
import React, { useState, useEffect } from 'react';

function FriendStatus(props) {
const [isOnline, setIsOnline] = useState(null);

useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
// effect 이후에 어떻게 정리(clean-up)할 것인지 표시합니다.
return function cleanup() {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});

if (isOnline === null) {
return 'Loading...';
}
return isOnline ? 'Online' : 'Offline';
}
```
위 코드에서 처럼 useEffect내에서 동작하는 함수 자체를 리턴하는 경우 React는 그 함수를 정리가 필요한 때에 실행시킨다고 나와있어 해당 내용을 반영해보았지만 에러는 계속 발생했습니다.
관련 내용을 여러 군데에서 참고해보던 중, 내부에 사용한 setTimeout 함수와 비슷한 케이스를 찾았고, 해당 내용을 반영했을 때 에러처리가 된 것을 확인했습니다.
```js
useEffect(() => {
let cleanUp = true;
function getFollowFeedLists () {
if (more) {
setLoading(true);
setTimeout(async () => {
if (cleanUp) {
await Axios({
method: 'get',
url: `https://server.bookdam.link/article/${userInfo.userInfo.id}?page=${page}`,
withCredentials: true,
headers: {
'Contnet-Type': 'application/json'
}
})
.then((res) => {
if (res.data.articleData.length === 0) {
setMore(false);
}
setFolowFeedLists(followFeedLists => [...followFeedLists, ...res.data.articleData]);
setLoading(false);
});
}
}, 1000);
}
}
getFollowFeedLists();
return () => {
cleanUp = false;
};
}, [userInfo.userInfo.id, page, more]);
```
해당 방법은 리턴문에서 최초 사용된 cleanUp 변수의 불린값을 변환하는 형식의 화살표 함수를 실행해 cleanUp(정리)하는 과정을 실행합니다.

### 에러 핸들링을 위해 참고한 레퍼런스 링크

[공식문서](https://ko.reactjs.org/docs/hooks-effect.html#effects-with-cleanup)
[링크](https://www.youtube.com/watch?v=aKOQtGLT-Yk)