문제 정의

프로젝트에서 네이버 지도(Naver Map)와 같은 외부 라이브러리를 사용하여 지도 위에 커스텀 정보창(InfoWindow)을 표시해야 하는 상황이 있었습니다. 네이버 지도 API는 정보창의 내용을 HTML 문자열 형태로 요구했지만, 애플리케이션은 React를 기반으로 UI를 구축하고 있었습니다. 따라서 React 컴포넌트를 직접적으로 정보창에 전달할 수 없어, UI를 동적으로 커스텀하는 과정에서 어려움을 겪었습니다.

해결 과정

문제를 해결하기 위해 ReactDOMServer.renderToString을 사용하여 React 컴포넌트를 문자열로 변환하는 방법을 도입하였습니다. 이를 통해 React 컴포넌트를 HTML 문자열로 변환하여 네이버 지도 API의 정보창에 전달할 수 있게 되었습니다. 구체적인 구현 과정은 다음과 같습니다:

1. React 컴포넌트 생성: 커스텀 정보창 내용을 표시하기 위한 React 컴포넌트 AddressInfoWindow를 작성했습니다. 이 컴포넌트는 주소 목록을 받아 화면에 렌더링합니다.

2. React 컴포넌트를 문자열로 변환: 네이버 지도 API의 infoWindow.setContent 메서드에 전달할 HTML 문자열을 생성하기 위해 ReactDOMServer.renderToString을 사용했습니다. 이를 통해 React 컴포넌트를 HTML 문자열로 변환하였습니다.

   import React from 'react';
   import ReactDOMServer from 'react-dom/server';
   import AddressInfoWindow from './AddressInfoWindow';
   import makeAddress from './makeAddress';
   
   function searchCoordinateToAddress(infoWindow, map, latlng) {
     infoWindow.close();
     window.naver.maps.Service.reverseGeocode(
       {
         coords: latlng,
         orders: [
   	    window.naver.maps.Service.OrderType.ADDR,
   	    window.naver.maps.Service.OrderType.ROAD_ADDR].join(',')
       },
       function (status, response) {
         if (status === window.naver.maps.Service.Status.ERROR) {
           return alert('Something Wrong!');
         }
   
         let items = response.v2.results,
           address = '',
           htmlAddresses = [];
   
         for (let i = 0, ii = items.length, item, addrType; i < ii; i++) {
           item = items[i];
           address = makeAddress(item) || '';
           addrType = item.name === 'roadaddr' ? '[도로명 주소]' : '[지번 주소]';
           htmlAddresses.push(addrType + ' ' + address);
         }
   
         const contentString = ReactDOMServer.renderToString(
           <AddressInfoWindow addresses={htmlAddresses} />
         );
   
         infoWindow.setContent(contentString);
         infoWindow.open(map, latlng);
       }
     );
   }
   
   export default searchCoordinateToAddress;
   

3. 테스트 및 검증 React 컴포넌트를 문자열로 변환하여 네이버 지도 정보창에 적용한 후, 다양한 좌표에서 정보창이 정상적으로 표시되는지 테스트했습니다. 또한, 에러 핸들링을 통해 변환 과정에서 발생할 수 있는 문제를 관리하였습니다.

결과

ReactDOMServer.renderToString을 사용하여 React 컴포넌트를 HTML 문자열로 변환한 후, 네이버 지도 API의 정보창에 성공적으로 적용할 수 있었습니다. 이를 통해 다음과 같은 개선 효과를 얻었습니다:

• 코드 간결성 향상: React 컴포넌트를 직접적으로 재사용할 수 있어, UI 로직이 간결해졌습니다.
• 유지보수 용이성: 정보창의 UI를 React 컴포넌트로 관리함으로써, 변경 사항이 있을 때 컴포넌트만 수정하면 되어 유지보수가 용이해졌습니다.
• 효율적인 데이터 관리: 전역 상태 관리 라이브러리를 사용하지 않고, 필요한 데이터만을 React 컴포넌트에 전달하여 효율적으로 관리할 수 있었습니다.
• 사용자 경험 개선: 정보창의 내용이 React 컴포넌트로 구성되어 있어, 일관된 UI 스타일과 기능을 제공할 수 있었습니다.

배운 점 (인사이트)

• renderToString의 유용성: React 컴포넌트를 문자열로 변환하여 외부 라이브러리와 통합할 수 있다는 점을 배웠습니다. 이는 외부 API가 HTML 문자열을 요구하는 경우 유용하게 사용할 수 있습니다.
• UI와 외부 라이브러리의 통합 방법 이해: React와 같은 프론트엔드 라이브러리를 사용하면서도, 외부 라이브러리와의 호환성을 유지하기 위한 다양한 방법을 학습할 수 있었습니다.
• 유지보수성과 코드 재사용성 향상: React 컴포넌트를 활용하여 UI를 구성하면, 코드의 재사용성과 유지보수성이 크게 향상됨을 경험했습니다.
• 성능 고려 사항: renderToString을 사용하면 클라이언트에서 추가적인 렌더링 작업이 필요 없다는 장점이 있지만, 너무 많은 컴포넌트를 문자열로 변환하면 성능에 영향을 미칠 수 있음을 인지하게 되었습니다.