[React/Hooks] useEffect로 값을 변경할 때 무한루프가 발생하는 이유와 useEffect

 

useEffect를 사용해서 state값을 변경했더니 무한반복이 발생해요 ㅜㅜ

 

 

useEffect가 뭔지 먼저 알고가보자

 

useEffect는 컴포넌트 마운트 이후 외부 효과(Effect)를 동기화하기 위한 훅임(ex. 데이터 패칭, api 호출, 채팅방 연결...)

useEffect(() => {setup func}, [deps])

 

setup 함수와 의존성 배열로 이루어져 있으며

의존성 배열의 값이 변경되면 useEffect의 콜백함수가 실행된다

 

무한 반복이 발생한다?

혹시 의존성 배열에 state 값을 넣지 않았나 확인해보자

const [count, setCount] = useState(0);

useEffect(() => {
	setCount(count + 1);
}

, [count]);

 

마운트 이후 state값이 변경되며 컴포넌트가 리렌더링 되고,

다시 useEffect가 실행되면서 state값을 변경시켜 무한 반복이 발생하는 것임

 

위의 코드는 setter 함수를 수정해서 문제를 해결할 수 있음

useEffect(() => {
	setCount(c => c + 1);
}

, [])

useState set함수에 업데이터를 사용하여 count를 의존성에서 제거해주면 됨

 

---

의존성 배열에 자꾸 빨간줄이 생겨요 ㅜㅜ

 

내가 프로젝트 진행중 채팅방을 만들 때 마주했던 오류였는데, roomId가 바뀔 때마다 useEffect를 실행시키고 싶었음

커넥트 함수에는 요청을 보낼 url이 포함되어 있었는데 이걸 컴포넌트 밖으로 빼냈어야 했다

(그 때는 이유를 몰라서 그냥 빨간줄 뜨는 채로 진행했음)

 

useEffect 안에 선언된 반응형 변수들은 "반드시" 의존성 배열에 추가 되어야 함

공식 문서에서도 의존성을 "선택"할 수 없다고 강조하고 있음

 

리액트의 린터는 반응형으로 변할 수 있는 변수가 useEffect 안에 선언되어 있지만, 의존성 배열에 존재하지 않는다면 오류를 발생시킴

이거 바뀌는 변수잖아

 

린터에게 이 변수가 바뀌지 않을 것이라는 걸 이해시켜 줘야함

바뀌지 않을 상수라면 컴포넌트 밖으로 꺼내거나 값을 직접 입력해서 상수로 사용해주자