React의 useEffect Hook의 의존성 배열(dependency array)은 어떻게 동작하나요?

useEffect Hook의 의존성 배열은 effect가 언제 다시 실행될지를 결정하는 중요한 역할을 합니다.

의존성 배열이 비어있으면 ([]), 컴포넌트가 처음 마운트될 때 딱 한 번만 effect가 실행됩니다. 컴포넌트가 언마운트될 때 정리(cleanup) 함수가 있다면 그때 실행됩니다.

특정 값을 의존성 배열에 넣으면 ([count]), 해당 값들이 이전 렌더링과 비교해서 변경되었을 때만 effect가 다시 실행됩니다. 이를 통해 불필요한 effect 실행을 막고 성능을 최적화할 수 있습니다.

의존성 배열을 생략하면, 컴포넌트가 렌더링될 때마다 effect가 실행됩니다. 이는 상태나 props가 변경될 때마다 effect를 실행해야 하는 경우에 유용하지만, 무분별하게 사용하면 성능 문제를 일으킬 수 있습니다. 따라서 의존성 배열을 신중하게 관리하는 것이 중요합니다.