[React] useEffect 무한루프 탈출 (에러핸들링)

React에서 useEffect가 계속 작동하는 무한루프가 발생하여 이를 해결해보았다.

 

useEffect 실행 조건

- 아래와 같이 새롭게 컴포넌트가 렌더링 될 때, useEffect의 첫 번째 인자인 함수가 실행됨

- useEffect의 두 번째 인자인 종속성 배열에 따라서 useEffect 실행 조건이 달라짐

 

useEffect(함수, [종속성1, 종속성2, ...])

 

1. 종속성 배열 자체가 없을 때, useEffect는 아래와 같은 상황에서 작동됨

- 컴포넌트 생성 후 처음 화면에 렌더링

- 컴포넌트에 새로운 props가 전달되며 렌더링

- 컴포넌트의 state가 바뀌며 렌더링

 

2. 종송성 배열이 빈 배열일 때, useEffect는 아래와 같은 상황에서 작동됨

- 컴포넌트 생성 후 처음 화면에 렌더링

 

3. 종송성 배열에 값이 있을 때, useEffect는 아래와 같은 상황에서 작동됨

- 컴포넌트 생성 후 처음 화면에 렌더링

- 종속성 배열 내 엘리먼트의 값이 변할 때

 

무한루프 원인 : useEffect 함수 내의 setState 때문

1. useEffect로 인해 setState가 실행되어, 그것이 다시 useEffect를 작동시킴

 

const [state, setState] = useState(0)

useEffect(()=>{
  setState(!state)
}, [state])

// useEffect 실행 → setState 실행으로 state 변경 → useEffect 실행 (무한루프)

 

2. useEffect에서 setState를 사용하며 종속성 배열이 없을 때

 

const [state, setState] = useState(0)

useEffect(()=>{
  setState(!state)
})

// 종속성 배열이 없으면 어떤 state든 변경되기만 하면 useEffect가 실행됨

 

해결방안

1. 처음 화면을 렌더링 할때만 useEffect를 실행시킬 경우, 종속성 배열로 빈 배열 사용하기

 

const [state, setState] = useState(0)

useEffect(()=>{
  setState(0)
}, [])

 

2. setState를 useEffect 내부에 넣지 말고, 이벤트 함수에 넣기 (이벤트 발행 시에만 useEffect 실행)

 

export default function (test) {

  const [state, setState] = useState(0)

  // 이벤트 핸들러 제작 후 setState 사용
  const eventHandler = () => {
    setState(1);
  }

  useEffect(()=>{
    함수
  }, [state])

  return (
    <button onClick={eventHandler}>이벤트 실행</button>
  )
}

 

3. 종속성 배열 내에 엘리먼트가 많을 경우, useEffect를 여러 개 사용하는 것도 방법