[240624 TIL] 네이버지도 Step by Step 3

네이버 지도 관련 마지막입니다.
네이버 지도 api 에서 정보창을 만들 때 기본적으로 문자열만 받는데,
이부분을 리액트 컴포넌트로 할 수 없을까 고민하다가 나온 결론입니다.

React.createRoot, React.render 조합

function SetInfoWindowContent(
    type,
    searchedValue,
    htmlAddresses,
    infoWindow,
    place = null,
    navigate = null,
    marker = null,
    user = null,
    contracts = []
) {
    // 임시 컨테이너 생성
    const container = document.createElement('div');

    container.style.padding = '10px';
    container.style.width = '100%';
    container.style.height = '100%';
    container.style.boxShadow = 'rgba(0, 0, 0, 0.1) 0px 4px 16px 0px';

    // React 컴포넌트를 임시 컨테이너에 렌더링
    const root = ReactDOM.createRoot(container);

    if (type === 'address') {
        root.render(
            <AddressInfoWindow
                searchedValue={searchedValue}
                htmlAddresses={htmlAddresses}
                infoWindow={infoWindow}
                marker={marker}
            />
        );
    } else if (type === 'coord') {
        root.render(
            <CoordInfoWindow 
                htmlAddresses={htmlAddresses} 
                infoWindow={infoWindow} 
                marker={marker} 
            />
        );
    } else if (type === 'place') {
        root.render(
            <InfoWindow place={place} 
                infoWindow={infoWindow} 
                navigate={navigate} 
                user={user} 
                contracts={contracts} 
            />
        );
    }
    // 컨테이너를 리턴
    return container;
}

export default SetInfoWindowContent;

사용하는 곳에서

//...중략...

// setInfoWindowContent 함수 호출
const container = SetInfoWindowContent(
    'address', 
    '', 
    htmlAddresses, 
    infoWindow, 
    null, 
    null, 
    marker, 
    user
);
// 네이버에서 제공하는 setContent의 인자로 container 를 넣어주면 됨
infoWindow.setContent(container);