UseEffect의 dependency(의존성) 관리

React로 개발을 하다보면 component가 렌더링 될때마다 특정 작업, 혹은 'side-effect'을 실행할 수 있도록 하는 useEffect hook을 사용하게 된다.

 

UseEffect를 사용할 때에는,

 

1. 첫 번째 인자로 실행하고자 하는 함수를 주고,

2. 두 번째 인자로 의존성 배열(deps)을 부여해준다.

 

여기서 잠시 useEffect의 deps에 대하여 알아보자면, 

 

빈 배열: 처음에만 함수 호출

 

의존값 존재 : 처음과 지정값이 변경될 때 호출

 

아예 없는 경우 : 컴포넌트가 리렌더링 될 때마다 호출

 

 

---

내가 개발한 맛집 애플리케이션을 예로 들어보겠다.

 

 

위의 이미지에서는 loadKakaoMarkers()라는 함수와  loadKakaoMarkers, map 의존성을 주었다.

 

사실 처음에는 아래와 같이 loadKakaoMarkers라는 의존성만 주었다. (실수!)

 

 

지도 애플리케이션을 상상하면 쉬운데, loadKakaoMarkers는 map이라는 지도 위에 클릭을 했을 때 마커를 나타나게 해주는 함수이다.

 

'loadKakaoMarkers는 어차피 map에 의존을 하는데, loadKakaoMarkers, map 둘 다 의존성을 부여할 이유가 있을까?' 라고 생각 했었던 것

 

알아야 할 점 1: useEffect의 의존성 배열에 명시된 값 중 하나라도 변경되지 않으면 해당 useEffect는 실행되지 않는다. 즉 loadKakaoMarkers나 map이 변경되어야 한다.

 

알아야 할 점 2: 이때, loadKakaoMarkers는 useCallback으로 감싸졌기 때문에, map이 변경되지 않으면 해당 함수도 "변경"되지 않는 함수 메모이제이션.

 

즉, map이 변경되었어도, 따로 "호출"을 해주어야만 하고, 이 작업은 useEffect로 해주고 있기 때문에 deps에 map을 넣어야한다는 것이다.

 

실제로 deps에 map을 넣을 경우에만 아래와 같이 성공적으로 마커가 보이는 것을 확인할 수 있다. useEffect는 편리하지만 잘못 사용할 경우 원하는 결과가 나오지 않을 수 있으니 주의하자!