리액트 - kakao is not defined 어떻게 해결하는게 좋을까

문제
해결
이유
소감

문제

React 18, create-react-app환경에서 카카오 맵 API를 연동하는 도중, 지도가 렌더링 되지 않았다!

head 태그 내에 스크립트 태그를 삽입하였으니, 브라우저가렌더링 되기 전에 로드될 것으로 생각하였다.

** html을 작성했는데 안 보이네요!!

~대충 index.html의 head 태그 안에 카카오맵을 불러 온다는 코드~

<!-- index.html -->
 
<head>
    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_API_KEY%&libraries=services,clusterer,drawing" id="map-lib"></script>
</head>

useEffect(() => {
    // map 불러오기    
}, []}

그러나 console에는 kakao is not defined만 기록될 뿐 아무것도 렌더링 되지 않았다.

해결

기초 : 리액트의 컴포넌트는 전역 객체에 직접 접근하지 않는다.

해결방안1-1

컴포넌트 함수 바깥에 전역객체로부터 kakao 속성을 뽑아 선언한다.

const { kakao } = window;

function Map() {
    //...
}

해결방안1-2

카카오 맵을 렌더링할 때 필요한 함수들을 별도의 커스텀 훅으로 작성한다.

//hooks/useKakaoMap.js

const { kakao } = window;

function useKakaoMap() {
    const initializeMap = useCallback(() => {
        const container = document.getElementById('map');
        const options = {
        center: new kakao.maps.LatLng(33.450701, 126.570667),
            level: 3
        };
        const newMap = new kakao.maps.Map(container, options);
        setMap(newMap);
    }, []);

    //...    
    
    return {
        initializeMap
    }
}

export default useKakaoMap;

//Map.js

function Map() {
    
    const {
        initializeMap,
    } = useKakaoMap();
    
    useEffect(() => {
        initializeMap();
    }, [initializeMap]);
    
    
    return(
     <div id="map"></div>
    
    )
    
}

드래그 이벤트, 클릭 이벤트, 마커 핸들링 등 일반적으로 지도의 필요한 기능들은

컴포넌트 내에 구현하는 것보다,

커스텀 훅으로 분리하는 것이 재사용성이나 가독성 측면에서 좋다.

이유

리액트에서 전역객체에 접근하지 않는 이유 - 리액트의 컨셉에 대해서 이해할 필요가 있다.

1) 캡슐화와 모듈성

- 각 컴포넌트는 독립적이고 재사용 가능해야 한다. 수많은 컴포넌트에서 전역객체에 의존하면 독립성을 잃어버리고, 굉장히 복잡해질 것이다.

2) 성능과 쉬운 유지보수

- 리액트는 상태가 변하면 재렌더링 하는데, 전역객체는 상태 변화를 추적하기 적합하지 않다.

3) 상태관리는 중앙에서

- 그럼에도 여러 변수를 공유하려면 Redux와 같은 중앙 상태 관리 라이브러리를 사용한다.

중앙 -> 컴포넌트로 데이터 흐름을 제어하여 에러를 피하고 유지보수를 쉽게 한다.

* 서버 사이드 렌더링

최근에는 SEO(검색엔진 노출 최적화)를 위해 서버 사이드 렌더링이 많이 사용되고 있는데, window 객체는 서버 사이드에서 접근할 수 없다!!

소감

첫 리액트 프로젝트를 하면서 겪었던 시행착오입니다.

vue로 실무를 2년 넘게 했는데, 리액트 프로젝트를 시작하면서

카카오 맵을 띄우지 못해 상당히 당황했습니다...!!!

vue에 비하면 폴더 구조나 훅 등 조금 자유로운 느낌이 있어 오히려 어렵습니다.

어떻게 작성하는 것이 효율적일까? 생각을 많이 하게 됩니다.

토이 프로젝트, 말 그대로 장난감처럼 다루면서 조금 더 익혀야 겠습니다.

* 블로그는 처음인데, 두루미스 상당히 독특하고 재미있습니다.

한국인이 좋아하는 3줄 요약도 해주고요 ㅋㅋ

해외 개발자 분들도 만날 수 있지 않을까요?

코드 에디터는 조금 개선되었으면 좋겠네요

의견 교류, 지적 환영합니다~!

행복한 하루 보내세요!

리액트 - kakao is not defined 어떻게 해결하는게 좋을까

언어 선택

문제

해결

기초 : 리액트의 컴포넌트는 전역 객체에 직접 접근하지 않는다.

이유

소감