useEffect Hook 의존성 배열 이해하기

useEffect 의존성이란?

---

useEffect Hook의 의존성 배열은 useEffect 함수가 언제 다시 실행될지 결정하는 역할을 합니다.

예시 코드: 여기서 [count] 부분이 의존성입니다.

JavaScript

const [count, setCount] = useState(0);

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

const handleClick = () => {
  setCount(count + 1);
};

return (
  <>
    <p>카운트: {count}</p>
    <button onClick={handleClick}>증가</button>
  </>
);

코드를 사용할 때는 주의가 필요합니다.

content_copy

위 코드에서:

• count는 상태 변수입니다.
• useEffect Hook은 컴포넌트가 처음 렌더링될 때와 count 값이 변경될 때 실행됩니다.
• handleClick 함수는 버튼 클릭 시 count 값을 증가시킵니다.

[count] 의존성 배열의 역할:

• useEffect Hook은 처음 렌더링될 때 실행됩니다.
• count 값이 변경될 때마다 다시 실행됩니다.
• count 값이 변경되지 않으면 다시 실행되지 않습니다.

따라서:

• 버튼을 클릭하여 count 값을 증가시키면 useEffect Hook이 다시 실행됩니다.
• count 값을 직접 변경하지 않으면 useEffect Hook은 다시 실행되지 않습니다.

예시:

• 처음 렌더링:
  • count 값은 0입니다.
  • useEffect Hook이 실행되고 "useEffect 실행!"이 출력됩니다.
• 버튼 클릭:
  • handleClick 함수를 호출하여 count 값을 1로 증가시킵니다.
  • count 값이 변경되었으므로 useEffect Hook이 다시 실행됩니다.
  • "useEffect 실행!"이 다시 출력됩니다.
• 직접 count 값 변경:
  • setCount(2)와 같이 코드를 사용하여 count 값을 직접 2로 설정합니다.
  • count 값은 변경되었지만, useEffect Hook은 다시 실행되지 않습니다.

결론:

• useEffect Hook의 의존성 배열은 함수가 언제 다시 실행될지 결정하는 데 사용됩니다.
• 배열에 포함된 값이 변경되면 함수가 다시 실행됩니다.
• 배열에 포함된 값이 변경되지 않으면 함수는 다시 실행되지 않습니다.

---

만약, useEffect에서 메서드 호출 시 의존성을 분리하고 싶다면?

---

1. 각 메서드를 분리:

JavaScript

const useEffect1 = () => {
  // 메서드 1
};

const useEffect2 = () => {
  // 메서드 2
};

const useEffect3 = () => {
  // 메서드 3
};

useEffect(() => {
  useEffect1();
  useEffect2();
  useEffect3();
}, [count]);

코드를 사용할 때는 주의가 필요합니다.

content_copy

이렇게 하면 각 메서드는 개별적으로 실행되고, 필요한 경우에만 호출됩니다.

2. 의존성 배열 사용:

JavaScript

const useEffect1 = () => {
  // 메서드 1
};

const useEffect2 = () => {
  // 메서드 2
};

const useEffect3 = () => {
  // 메서드 3
};

useEffect(() => {
  useEffect1();
}, [count]);

useEffect(() => {
  useEffect2();
}, [someOtherState]);

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

코드를 사용할 때는 주의가 필요합니다.

content_copy

이렇게 하면 각 메서드는 개별적인 의존성 배열을 가지고, 해당 배열에 있는 값이 변경될 때만 호출됩니다.