[Error Handling] useEffect 무한 루프 오류

> 해결된 에러라면 라벨에 'Complete' 를 달아주세요.
> 미해결된 에러라면 라벨을 'In progress' 로 변경해주세요.

### 어떤 에러인가요?
-

게시판의 글 목록을 렌더링하기위해 state를 이용 글 목록 정보를 받아 저장시키려고 했다.
contentlist 는 datatoList 함수에 의해 업데이트가 진행이 된다.

처음 의도한것은 다음과 같다 useEffect에 해당 함수를 넣고 두번째 인자의 매개변수로 axios로 새 배열로 업데이트된 contentlist를 감시하면 axios가 진행이 되어 contentlist의 내용이 바뀔때 새로 렌더링 될것이라 기대하였다.
그러나 contentlist를 넣으면 useEffect에서 무한 루프가 일어나 get axios 요청이 무한히 가게된다.

그렇다고 빈배열을 넣으면 처음한번만 렌더링되고 더 이상 랜더링 되지 않기 때문에 특정 게시판에서 다른 게시판으로 이동할 때 화면의 변화가 일어나지 않는다. 각 게시판은 근본적으로는 같은 게시판이고 차이점은 서버에 요청을 보내서 받는 데이터가 다른것 뿐이기 에 페이지의 변화가 일어나지 않았기 때문이다.
### 에러 메시지

```bash
$ 터미널의 에러 코드를 여기 넣어주세요.
```

### 에러 핸들링 방법

- 핸들링 방법에 대해서 간단하게 기록해보세요.
두번째 인자로 모달을 클릭했을때 변화하는걸 확인할 수 있었던 ParentCategory, ChildCategory 변수를 주었다. 모달을 클릭할때 해당 변수가 변하므로 자연스럽게 useEffect가 변화를 감지하여 작동 화면을 새로 렌더링해준다.
useEffect의 두번쨰 인자로 contentlist를 넣으면 무한루프가 일어나는 이유는 이 contentlist가 배열 즉 object 값이기 때문이었다.
자바스크립트에서 object는 주소값을 가리키기 때문에 겉으로보기에는 같은 배열이라도 (같은 주소를 사용하는것이 아닌 한) 실제로는 다른 배열인데 axios로 받아온 새 배열은 기존 배열과 값 자체는 변화가 없더라도 다른 배열로 감지된다.
즉 contentlist 에 초기값 [](빈배열)이 들어오고 렌더링 -> axios를 통해 새 객체가 contentlist에 할당 -> contentlist가 변화했으므로 useEffect는 다시 datatoList 함수를 실행함 -> axios를 통해 받아온 값은 기존에 이미 가지고 있던 값과 데이터는 동일하지만 새로 받아온 값이므로 주소가 다름 === 다른 객체로 취급 -> useEffect는 그러므로 이번에도 contentlist가 변화했다고 생각하고 다시 datatoList를 실행 -> 이하 무한반복루프가 발생하는 것이었다.
그렇기에 특정 이벤트 발생시에 변화하는 '원시값'(여기서는 parentCategory, ChildCategory)을 잘 찾아 해당 원시값의 변화를 감지하도록 설정해주어야 한다. 즉 useEffect의 두번째 인자로는 참조형이 아닌 원시형을 사용해야 한다.

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

[링크](https://brosis.tistory.com/67)