ref 부분 에러

[seongsoo96]

우선 사용하기 편한 오픈소스 만들어주셔서 감사합니다.

https://react-kakao-maps-sdk.jaeseokim.dev/docs/sample/map/mapRelayout 이 부분에서 우선 useEffect부분에 map.relayout() 타입 에러?가 납니다.

다음은 Map 컴포넌트에 ref 설정에서 에러가 납니다.

에러 내용 TS2322: Type '{ children: (Element | Element[] | null)[]; center: { lat: number; lng: number; }; className: string; style: { width: string; height: string; }; level: number; ref: MutableRefObject; }' is not assignable to type 'IntrinsicAttributes & AsProp<"div"> & Omit<Pick<DetailedHTMLProps<HTMLAttributes, HTMLDivElement>, "key" | keyof HTMLAttributes<...>>, keyof MapProps> & MapProps'. Property 'ref' does not exist on type 'IntrinsicAttributes & AsProp<"div"> & Omit<Pick<DetailedHTMLProps<HTMLAttributes, HTMLDivElement>, "key" | keyof HTMLAttributes<...>>, keyof MapProps> & MapProps'. 71 | style={style} 72 | level={level} // 지도의 확대 레벨

73 | ref={mapRef}

[JaeSeoKim]

const mapRef = useRef<kakao.maps.Map>()

형태로 kakao.maps.Map 타입 지정을 하여 사용해야 합니다. 만일 위 방법으로 해결이 안된다면 해당 오류가 구현된 Coadsandbox 와 같은 Online IDE 서비스 이용해서 공유 부탁드리겠습니다. 현재 군대에 입대한 상황이라 직접 테스트 하기 힘들다는 점 양해 부탁드립니다.

[biud436]

같은 문제를 겪다가 해결하여 댓글을 남깁니다.

아래와 같이 기존 타입에 & 연산자를 이용하여 누락된 React.RefAttributes<kakao.maps.Map> 타입을 조합하면 임시 해결이 가능했습니다.

export type MapComponent = <T extends React.ElementType = 'div'>(
    props: PolymorphicComponentPropsWithOutRef<T, MapProps> &
        React.RefAttributes<kakao.maps.Map>,
) => React.ReactElement | null;

export const RefMap = Map as MapComponent;

[JaeSeoKim]

해당 부분 확인해서 수정된 버전으로 업데이트 진행하겠습니다! 감사합니다! @biud436 @seongsoo96