[react-contexts] EventTrackingProvider trackScreen의 파라미터 의존성 이슈

[dddeok]

설명

호텔 이벤트 로깅 파라미터에 대한 이슈를 수정하던중 발견하게 된 이슈 입나다.

  useEffect(() => {
    if (page?.path) {
      const utmParams = Object.keys(query || {})
        .filter((key) => key.match(/^utm_/i))
        .reduce(
          (params, key) => ({
            ...params,
            [key.replace(/^utm_/, '')]: query[key],
          }),
          {},
        )

      trackScreen(page?.path, pageLabel, utmParams)
    }
  }, [trackScreen, page?.path, pageLabel, query])

해당 코드를 보면 query의 변화에 따른 의존성을 가짐에 따라 해당 trackScreen을 실행하게 됩니다. 하지만 query 가 존재하지 않더라도 해당 페이지 내에서 렌더링이 다시 일어날 경우 얕은 비교정책에 의해서 query 또한 변경된걸로 판단하고 해당 trackScreen이 다시발생하게 됩니다.

예시) /hotels, /hotels/#hash.search.popup 과 같은 케이스의 경우에서 발생하였음.