[React] useEffect의 dependency 역할

useEffect를 사용하다보면, dependency에 빈 배열을 넣는 경우도, 일부 state값들을 넣기도하고, 혹은 dependency를 생략하기도 한다.

이 셋의 차이를 알고자 한다.

 

먼저 dependency를 아예 생략하는 경우이다.

useEffect(() => {});

dependency가 없기 때문에 제일 처음 렌더링 할 때 한번 불리고, 그 뒤로 어떤 작은 state들이나 요소들이 변화할 때마다 계속 불린다.

즉, 불필요한 콜이 많아진다.

(위 형태는 거의 사용하지 않는다)

 

 

다음은 dependency로 빈 배열이 들어가는 경우이다.

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

렌더링 후에 딱 한 번만 실행시키고 싶을 때 위와 같이 작성한다.

 

 

마지막으로 배열에 변수들을 넣는 경우이다.

const [num, SetNum] = useState();
useEffect(() => {},
[name]);

제일 처음 렌더링 후에 한 번 불린 후, 배열 안의 변수 값이 변화할 때마다 불린다.

내가 원하는 변수를 지정하여 해당 변수가 변화할 때만 useEffect가 불리도록 할 수 있다.