리액트의 의존성 배열 알아보기

TL;DR

useEffect에서 의존성 배열을 정확히 설정하지 않으면 react-hooks/exhaustive-deps ESLint 경고가 발생한다.
의존성 배열에는 코드 내에서 참조되는 모든 변수와 함수가 포함되어야 한다.
exhaustive-deps경고의 해결 방법
- useCallback을 사용하여 useEffect가 실행될 때 함수가 재생성되지 않도록 최적화
- useEffect 내부로 함수를 이동시켜 useEffect 내에서만 정의되도록 하여 외부에 별도의 의존성을 추가할 필요가 없어진다.

exhaustive-deps 경고의 원인

리액트에서 useEffect를 사용할 때 react-hooks/exhaustive-deps 라는 ESLint 경고를 마주할 때가 많았다. 이 경고는 의존성 배열이 정확히 설정되지 않았을 때 발생하는 경고였다. 이번 글에서는 의존성 배열과 exhaustive-deps 경고를 해결하기 위해 어떻게 설정해야하는지, 그리고 이 규칙이 도입된 배경에 대해 다뤄보았다.

리액트의 의존성 배열

리액트 훅의 useEffect를 바탕으로 살펴보면, 의존성 배열은 useEffect의 두 번째 인자로 전달되는 배열이며 설정 함수의 코드 내부에서 참조되는 모든 반응형 값들이 포함되어있다. 이 값이 변경될 때마다 effect가 실행되게 된다. 따라서 의존성 배열은 useEffect가 언제 실행될지를 결정하고 불필요한 재렌더링을 방지한다.

빈 배열을 넣으면 컴포넌트가 처음 마운트될 때 effect가 실행되며 배열을 생략하면 컴포넌트가 렌더링될 때마다 effect가 실행된다.

주의할 점은 Effect의 의존성을 “선택”할 수 없다는 점이다. 의존성 배열에는 코드 내부에서 참조되는 모든 반응형 값이 포함된다고 했는데 여기서 반응형 값이란 props와 컴포넌트 내부에 선언된 모든 변수, 함수들이 포함된다. useEffect 내에서 사용하는 외부 변수나 함수를 의존성 배열에 모두 추가해야하는데 코드를 작성하다보면 의존성에 포함해서 불필요한 useEffect의 실행을 일으키는 반응형 값이 생길 수 있다. 이 반응형 값을 제거한다면 exhaustive-deps 경고가 나타나고 이를 단순히 // eslint-disable-next-line react-hooks/exhaustive-deps 주석을 사용해서 규칙을 비활성화할 수는 있지만 코드 구조를 개선하여 근본적인 문제를 해결해야한다.

의존성 배열 경고에 대한 해결책

먼저 다음의 코드를 살펴보면 처음엔 잘 동작하지만 문제점이 있다.

import { useState, useEffect } from 'react';

function MyComponent({ searchKeyWord }) {
  const [data, setData] = useState([]);

// 데이터 fetching 함수
async function fetchData() {
  const response = await fetch(`https://api.example.com/search?q=${searchKeyWord}`);
  const result = await response.json();
  setData(result);
}

useEffect(() => {
    fetchData();
}, []);

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

useEffect의 의존성 배열이 빈 배열로 설정되어 있다는 점이다. searchKeyWord가 변경되어도 useEffect가 재실행되지 않아 검색어가 바뀌었을 때 새로운 데이터를 fetching하지 않는다.

문제를 해결하려면 useEffect 안으로 fetchData 함수를 이동하고 의존성 변수에 searchKeyWord 를 추가해주어야 한다.

useEffect(() => {
  async function fetchData() {
    const response = await fetch(`https://api.example.com/search?q=${searchKeyWord}`);
    const result = await response.json();
    setData(result);
  }

  fetchData();
}, [searchKeyWord]);

의존성을 추가해주면서 searchKeyWord 가 변경될 때마다 fetchData 실행되어 데이터가 올바르게 업데이트된다.

왜 이 방식이 더 나을까?

우선 의존성 관리가 용이해진다. fetchData가 useEffect 내에서만 정의되면 외부에 별도의 의존성을 추가할 필요 없이 useEffect에서 처리되므로 관리가 간편하다.
코드의 가독성이 향상된다. 함수가 useEffect 안에 묶여 있어 코드 흐름이 한눈에 들어오고 훅이 실행될 때 무엇이 실행되는지 쉽게 이해할 수 있다.
searchKeyWord를 클로저로 참조하는 상황에서 이전 값이 계속 참조될 위험이 있지만useEffect 의존성 배열에 추가되어 이 값들을 최신 상태로 사용할 수 있다.

모든 반응형 값을 의존성 배열에 넣어야 할까?

여러 개의 useEffect에서 동일한 함수를 호출해야할 때나 props로 전달된 함수일 경우에는 함수를 useEffect 안에 넣는 것이 비효율적일 수 있다. useEffect가 실행될 때마다 함수가 재생성되어 불필요한 메모리 사용과 성능 저하가 발생할 수 있기 때문이다.

아래의 예시처럼 함수가 컴포넌트의 상태나 props에 의존하지 않는다면 getFetchUrl 함수를 컴포넌트의 외부로 두어 재사용할 수 있다.

// ✅ Not affected by the data flow
function getFetchUrl(query) {
  return 'https://hn.algolia.com/api/v1/search?query=' + query;
}

function SearchResults() {
  useEffect(() => {
    const url = getFetchUrl('react');
    // ... Fetch data and do something ...
  }, []); // ✅ Deps are OK

  useEffect(() => {
    const url = getFetchUrl('redux');
    // ... Fetch data and do something ...
  }, []); // ✅ Deps are OK

  // ...
}

함수가 상태나 props에 의존하지 않기 때문에 의존성 배열에 추가하지 않아도 된다.

다른 해결 방법으로는 useCallback 으로 함수를 메모이제이션하는 방법이 있다. getFetchUrl 함수가 의존성 배열에 포함되어도 getFetchUrl 이 변경되지 않는 한 useEffect가 불필요하게 재실행되지 않게 된다.

이외에도 useEffectEvent를 사용하는 방법과 객체 전체가 아닌 필요한 속성만 의존성 배열에 포함시키는 방법 등 상황에 맞춰 불필요한 의존성을 제거하여 최적화할 수 있는 여러가지 방안이 있었다.

exhaustive-deps 규칙이 도입된 배경

리액트 훅을 사용할 때 발생할 수 있는 문제 중 하나는 stale closure 문제이다. 함수형 컴포넌트에서 상태나 props를 참조하는 함수가 최신 값을 반영하지 않고 이전 값을 계속 참조하게 되어 버그가 발생할 수 있다. 따라서 의존성 배열을 정확히 설정하도록 해당 규칙이 도입이 되었다. 이 규칙을 따른다면 훅의 의도된 동작을 보장하고 예상하지 못한 버그를 줄일 수 있다.

exhaustive-deps 규칙을 지키는 이유

의존성을 정확히 나열하면 해당 의존성이 변경될 때 훅이 다시 실행되므로 예기치 않은 동작을 방지할 수 있다.
의존성을 정확하게 설정함으로써 리액트가 재렌더링을 최적화할 수 있다. (useCallback)
잘못된 의존성으로 인한 버그를 줄일 수 있다.