[Error Handling Log] 리액트 props로 전달받은 변수를 useState에 넣을때 무한루프가 걸린다. -> useEffect로 해결/ 류준열

> ### 어떤 에러인가요?
> 리액트 무한루프 렌더링
- props로 전달받은 변수를 setState에 넣을때 무한루프가 걸렸다.(이게 이번상황에만 국한되는건지 원래이런건지는 아직 확실하지 않다.)
- -> 수정 : 일반적인상황은 아님
- -> 12/13일 원인 알아냄 : useEffect로 해결된 이유는 useEffect를 사용하기 전에는 다른 요소들에 의해 해당기능이 영향을 받아 무한루프가 일어났던 것이다.
```js
useEffect(()=>{원하는기능},[])
첫번째 인자 : 실행하려는 기능이 담긴 콜백함수,
두번째 인자 : 배열 -> 배열안의 값들이 바뀔때만 첫번째 인자 콜백이 실행된다.
```
useEffect의 두번째 인자에 들어가는 배열이 이 에러를 해결하는 열쇠인데, 두번째 배열에 있는 값들에 변화가 있을때만 콜백이 실행되기 때문에
해당 기능을 sideEffect로부터 완벽하게 보호할 수 있는것이다.
> ### 에러 메시지

> ### 에러 핸들링 방법
> - useEffect를 사용하여 렌더링순서를 제어한다.
> ### 핸들링 방법에 대해서 간단하게 기록해보세요.
> - 전 : `setText(comment.text)`가 sideEffect에 노출되어 있기에 이리저리 휘둘리다 무한루프가 된다.
> - 후 : `setText(comment.text)`가 오.직 첫 렌더링시에만 실행된다. 그리고 끝.

- 다음은 리액트의 렌더링조건이다.


----- 아래 내용은 내가 이 에러핸들링로그를 처음 적을때 sideEffect에 의한 에러인지 모르고 적었던 내용임----
React의 useState렌더링은 비동기로 이루어진다.

때문에 개발자의 예측대로 렌더링이 되지 않고 꼬여버린다.

```javascript
const [text,setText] = useState('bye')
..생략..
setText('hi') //5초걸린다 가정
console.log(text)//2초걸린다 가정

이런상황에서는 5초동안 setText('hi')를 기다리지 않고
그냥 console.log(text)를 해버리기 때문에 초기값 'bye'가 출력된다.

다들 한번씩은 useState값이 밀려서 렌더링되는 경우를 확인했을텐데 이 때문이다.

---
useEffect(()=>{
console.log(text)
},[text])

useEffect는 렌더링이 된 이후에 실행되기 때문에 , DOM이 업데이트 되었음을 보장한다.
위 함수는 text값이 바뀔때마다 console.log(text)를 한다는 뜻이다.
즉 두번째 인자 배열안의 값들이 바뀔때마다 useEffect의 첫번째 인자인 콜백을 무조건 실행한다.

이런방식으로 개발자는 리액트의 렌더링순서를 제어할 수 있다.
```

> ### 에러 핸들링을 위해 참고한 레퍼런스 링크
> 링크: https://velog.io/@eunjin/React-useEffect-%EB%AC%B4%ED%95%9C%EB%A3%A8%ED%94%84-%ED%83%88%EC%B6%9C%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

Start with the issue body’s useState and useEffect examples and the linked reference article. The issue does not name a file, test, or specific documentation location; a documentation change would be complete only after a concrete target and scope are identified.

Written by the indexing model from the issue text.