[React] 레이아웃 훅 수정이 결제버튼 테스트에 영향을 미치는 이유

얼마 전, 회사에서 흥미로운 디버깅 이슈가 있었다. 우리 팀에서는 프로젝트 내부에서 사용하기 위해 여러 커스텀 훅을 만들어 재사용하고 있는데, 그중 레이아웃을 감지해서 특정 로직을 실행시킬 수 있는 훅이 존재한다. 이 훅은 useEffect훅을 사용하여 유사한 인터페이스를 확장한 커스텀 훅으로, window.innerWidth 감지를 통해 레이아웃을 알려주는 역할을 한다. 간소화해서 윤곽만 나타내면 대충 아래와 같은 형태로 구현되어 있다. (throttle 등은 생략) const useDisplayDetectEffect = (effect: Effect, deps: Deps) => { const callback = useCallback(effect, deps); useEffect(() => { const ..

2022.09.04