본문 바로가기
Front-end/ReactJS

useEffect 사용하다가 무한루프에 빠졌다 ?

by blogsy 2020. 12. 3.

react-hook 사용하여 프로젝트를 진행 중,  잘 사용하던 useEffect로 인해 무한루프에 빠졌습니다.

  useEffect(() => {
      try {
        const something = {api 데이터 가져오는 코드}; //something은 object
        if (조건 true) {
          setOthers(others);
          setSomething(something);
        }
      } catch (error) {
        ...
      }
  });

대략 이런 코드였는데 구글링을 열심히 해보니 something이 object 타입이라 생긴 문제로 판단했습니다. 

 

c언어에서 주소값이 다른 것처럼.... object는 같은 빈 object여도 {} 와 {} 이 다릅니다.

그래서 setSomething으로 something을 계속 업데이트해서 생긴 문제

 

여러 해결방법이 있겠지만 , 제가 선택한 해결방법은 

 

  useEffect(() => {
      try {
        const something = {api 데이터 가져오는 코드}; //something은 object
        if (조건 true) {
          setOthers(others);
          setSomething(something);
      	}
      } catch (error) {
      ...
      }
    
  }, [others]);

이렇게 dependency에 계속 관찰할 것을 넣어주었습니다. dependency에 변수를 넣어주면, 그 변수가 바뀔 때만 useEffect가 실행됩니다.

 

우선은 이렇게 해결해놓았고, object deep copy를 찾아보고 있습니다~ 

'Front-end > ReactJS' 카테고리의 다른 글

커스텀 드롭다운 메뉴 만들기  (0) 2021.01.09
useState 사용 시 배열 아이템 업데이트 방법  (0) 2021.01.06
React로 사고하기 !  (0) 2020.12.21

댓글