useEffect의 dependency array에 대해서 설명해 주세요.

👩🏻‍💻 useEffect의 dependency array에 대해서 설명해 주세요.

 

💁🏻‍♀️ 요약하자면 ,

useEffect란, 컴포넌트 내에서 사이드 이펙트를 실행할 수 있게 하는 훅입니다. useEffect는 첫 번째 인자로 콜백함수를 받고, 두 번째 인자로 배열을 받는데, 이 배열을 dependency array 라고 합니다. 

 

dependency array란 무엇인가요?

종속성 배열이라 부르는 이유는 useEffect의 실행이 화면에 처음 렌더링 될 때 그리고 종속성 배열의 value 값이 바뀔 때마다 실행되기 때문입니다. 만약 빈 배열이 전달된다면 첫 렌더링될 때만 실행됩니다. 

 

useEffect에 dependency array를 주지 않으면, 

상태가 변경될 때마다 컴포넌트가 리렌더링이 됩니다. 간단한 local state가 계속 변경될 때마다 새롭게 컴포넌트가 리렌더링 된다면, 이는 성능에 악영향을 미칩니다.

 

 

📎 내용 참조

- Blog: React Hooks (useEffect)

- velog: [React] useEffect의 dependency array