[React] useEffect 사용 시 주의할 점

 

 

1. useEffect란

React 개발하다보면 안써본 적이 없는 사람이 없을 useEffect에 대해 알아보려고 한다. useEffect란 React에서 기본적으로 제공해주는 hook으로, 함수 컴포넌트에서 부수효과를 처리하기 위해 사용된다. 컴포넌트가 렌더링 될 때마다 어떤 특정한 작업을 할 수 있도록 하는 hook인데 컴포넌트가 mount 됐을 때, unmount 됐을 때, update됐을 때 특정한 작업(부수효과)를 처리할 수가 있다. 

클래스형 컴포넌트의 생명주기 메서드를 함수형 컴포넌트에서도 유사하게 사용할 수 있는 hook인 것이다. 

useEffect도 의존성 배열을 인자로 받는데, 의존성 배열이 빈배열일 경우에는 최초 렌더링 시 한번만 실행이 되고, 의존성 배열에 특정 상태를 넣어주게 되면 그 상태가 변경될 때마다 감지해서 실행하게 된다.

  useEffect(() => {
    console.log("실행");
  }, []);

  useEffect(() => {
    console.log("횟수", count);
  }, [count]);

 

위와 같은 경우는 count라는 변수의 상태가 변경될 때마다 useEffect 내부의 console.log("횟수", count) 가 실행될 것이다. 이렇게 useEffect가 실행될 때 부수효과를 처리하거나 실행하면 되는 데 여기서 말하는 부수효과는 과연 어떤 것들이 있을까?

 

2. 부수효과(side effect)란?

1) 서버와의 통신

서버에서 데이터를 받아오거나, 요청하는 등 서버와의 통신을 할 때

2) setTimeout, setInterval

위와 같은 호출 스케줄링을 다루는 함수

3) 리액트가 아닌 다른 외부와의 상호작용

프로젝트에 따라서서 리액트를 다른 js 라이브러리와 함께 사용할 수도 있다. 이 때 리액트 외부의 엘리먼트 또는 브라우저 API를 사용하는 경우.

 

3. useEffect 사용 시 주의해야할 점

useEffect를 사용하다가 브라우저가 갑자기 무한루프에 빠지는 경험을 react 개발자라면 한번쯤은 해봤을 것이다. useEffect를 적절히 사용하지 않으면 그렇게 무한으로 실행되는 경우가 있을 수 있는데 그런 문제를 방지하려면 주의해서 사용해야한다.

useEffect 사용해야할 때 주의할 점을 몇가지 추려보자면

1) 의존성 배열 잘 넘겨주기(의존성 배열에 아무것도 넘겨주지 않으면 의존성이 undefined 상태가 되어 렌더링 전후 비교를 할수 없기 때문에 무한루프에 빠짐)

2) useEffect의 의존성 배열의 상태를 useEffect에서 변경되지 않게 하기

3) useEffect안에서 사용되는 함수는 useEffect 안에 놓기

4) 여러 useEffect에서 함수를 공유할 때는 useCallback 사용하기