useEffect의 빈 배열 dependency과 No dependency의 차이

React의 대표적인 hook 중 하나인 useEffect는 기본적으로 랜더링이 될때마다 내부 callback이 실행됩니다.

 

이 내부 callback 함수를 조건부로 실행시키고 싶을 때 dependency array를 이용하며, 이는 useEffect의 두번째 인자에 해당됩니다. 

 

두번째 인자에 dependency array를 넣어준다면, 컴포넌트가 랜더링 될때마다 callback을 실행시키는 것이 아니라 dependency array에 포함된 변수가 변경될 때만 callback을 실행시킬 수 있습니다.

 

---

 

그렇다면 dependency array에 빈 배열을 넣었을때와, 아예 dependency array를 선언하지 않았을 때의 차이는 무엇일까요?

 

 

dependency array에 빈 배열을 넣었을때는 컴포넌트가 마운트 되었을때만 callback이 실행이 되고, 그 이후 리랜더링이 되어도 callback이 실행되지 않습니다.

하지만 dependency array 자체를 선언하지 않았을때는 컴포넌트가 마운트 되었을때는 물론이고 리랜더링이 될때도 callback이 실행됩니다.

 

컴포넌트가 마운트 되었다는 의미는, DOM 객체가 생성되고 브라우저에 해당 컴포넌트가 나타나는 것입니다.

보통 창을 새로고침 하거나 해당 컴포넌트에 진입하였을때 컴포넌트가 최초에 한번 생성되게 되는데, 이때를 마운트라고 합니다.

 

---

 

이 코드는 테스트용으로 작성한 코드입니다.

 

message에 특정 text를 입력 할때마다 state가 변경되며 리랜더링이 되는데,

dependency array가 빈 배열인 경우에는 로그가 기록되지 않지만, 빈 배열조차도 없는 경우에는 로그가 기록되는 모습을 보이고 있습니다.

 

 

 

※ 공식문서를 참고하여 작성하였습니다.