🤔 어떤 에러가 발생하였을까?
SignUpPC라는 부모 컴포넌트 안에 SignUpButton라는 자식 컴포넌트가 있다.
회원가입 버튼 클릭 시, SignUpButton 컴포넌트 안에서 Naver maps Geocoding을 통한 경도, 위도 정보 가져오는 기능을 구현하던 도중, 다음과 같은 에러가 발생하였다.
에러 메시지
Uncaught Error: A component suspended while responding to synchronous input.
This will cause the UI to be replaced with a loading indicator.
To fix, updates that suspend should be wrapped with startTransition.
at throwException (react-dom.development.js:19055:35)
해당 에러 메시지를 해석한다면 다음과 같다.
탐지되지 않은 오류: 동기식 입력에 응답하는 동안 일시 중단된 구성 요소입니다.
이렇게 하면 UI가 로딩 표시기로 대체됩니다.
일시 중단된 업데이트를 수정하려면 startTransition으로 마무리해야 합니다.
❓ 에러의 원인
Sign Up API와 관련된 로직이 꽤 길어서, Sign Up button 컴포넌트를 따로 만들고 해당 컴포넌트에 useNavermaps() Hook을 호출했었다.
이 때 컴포넌트 단에서 해당 Hook 을 호출했던 것이 문제였다.
기존 코드에는 naver maps 객체를 다음과 같이 호출하였다.
const { naver } = window;
naver.maps.Service.geocode(
// ...
);
위와 같이 naver 전역 객체를 호출하게 된다면 window 안의 naver type을 설정해주어야 하기 때문에 조금 더 코드가 복잡해질 수 있다.
해당 코드를 대체할 수 있는 custom Hook 이 바로 useNavermaps() 이다.
둘 다 같은 window.naver 객체를 반환한다.
💡 에러 해결 방법
useNavermaps() Hook을 자식 컴포넌트에서 호출하지 않고 부모 컴포넌트에서 호출하는 방식으로 변경하면 에러가 발생하지 않는다.
자식 컴포넌트에서 Hook을 호출하면 부모 컴포넌트 렌더링 과정에서 Hook이 호출되지 않았을 수도 있기 때문에 문제가 발생할 수 있다.
따라서 Hook은 반드시 최상위 레벨에서 호출해야 하며, 자식 컴포넌트에서 필용한 경우 props로 전달받아 사용하는 것이 좋다.
Comment