👨‍💻 사건

• 팀프로젝트 중 서버 관리자인 멘토로 부터, 너무 어마어마하게 많은 네트워크 통신이 이루어져있다고 말씀해주셨다. 처음에 어떠한 문제인지도 모르고, 처음 마주한 대형사고에 팀원 전부 패닉에 빠진 사건이었다.

✅ 해결

팀원 전부가 모여 화면 공유를 한 후, 가장 처음 홈화면 부터 들어가, 개발자도구 - 네트워크 탭을 통해 통신기록을 살펴보았다.

그러다, 프로필페이지에 접근을 하면 무한렌더가 되면서 API 호출을 하고있는 것을 볼 수 있었다.

이는 useEffect 배열에 잘못된 의존성배열을 설정함으로써 무한 렌더가 일어난 것이었다.

const [productList, setProductList] = useState([]);
// 상품 리스트 불러오기
const getProduct = () => {
  axios({
    url: url + `/product/${accountname ? accountname : userAccountname}`,
    method: 'GET',
    headers: {
      Authorization: `Bearer ${userToken}`,
      'Content-type': 'application/json',
    },
  })
    .then((res) => {
      setProductList(res.data.product);
    })
    .catch((err) => console.error(err));
};
useEffect(() => {
  setisRendered(true);
	// 상품 리스트를 저장하기 위해, 서버와 통신을 하면서 
	// then()구문을 통하여 상태관리를 한다.
  getProduct();
}, [userToken, accountname, productList]);
	// 이러한 상태관리를 통해 뽑아낸 데이터 ( productList )가 존재하면
	// 한번 더 렌더를 한다.
	// 또 한번 getProduct() 함수를 실행하여, 위의 동작을
	// 반복한다. 
	// -> 결국, 무한렌더의 굴레에 빠지게 된다.

위의 경우를 해소 하기위해서, 의존성 배열에 productList 인자를 제거하였더니, 무한렌더가 종료 되었다.

💭 개선

위의 코드는 팀원중 한분이 짠 코드인데, 나는 이러한 경우를 방지하기 위해 왠만하면 useEffect안에 if 문 을 통해 한번 조건을 주고 실행하는 방식을 사용하고 있다. 이러한 방식을 할 경우, 최소 무한 렌더는 막을 수 있다.