This is an AI translated post.
React - How to fix the 'kakao is not defined' error
- Writing language: Korean
- โข
-
Base country: All countries
- โข
- Information Technology
0000-00-00 00:00:00
Select Language
Summarized by durumis AI
- The problem that occurred when integrating the Kakao Map API in a React 18 environment with create-react-app, where the map was not rendered, is because React components do not directly access global objects.
- React avoids direct access to global objects for encapsulation, performance, and state management, and uses centralized state management libraries like Redux to control data flow.
- Unlike Vue, React gives developers more freedom in terms of folder structure and hooks, but it can be more challenging for novice developers. It's recommended to get familiar with it through toy projects.
- Issue
- Solution
- Reason
- Thoughts
Issue
While integrating Kakao Map API in a React 18, create-react-app environment, the map didn't render!
I had inserted the script tag within the head tag, so I thought it would load before the browser rendered.
** The HTML was written but it's not visible!!
~Roughly code that calls Kakao Map inside the head tag of index.html~
<!-- 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>useEffect(() => {
// map ๋ถ๋ฌ์ค๊ธฐ However, the console only recordedkakao is not defined,and nothing was rendered.
Solution
Basics: React components don't directly access global objects.
Solution 1-1
Declare the kakao property from the global object outside the component function.
const { kakao } = window;
function Map() {
//...Solution 1-2
Create separate custom hooks for the functions needed to render the Kakao Map.
//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>
)
Generally, necessary functions for the map, such as drag events, click events, and marker handling,
are better implemented in custom hooks rather than within the component,
in terms of reusability and readability.
Reason
You need to understand the concept of React to know why React doesn't access global objects.
1) Encapsulation and Modularity
- Each component should be independent and reusable. Depending on global objects in numerous components will break independence and create complexity.
2) Performance and Easier Maintenance
- React re-renders when the state changes, and global objects are not suitable for tracking state changes.
3) State Management is Centralized
- If you still need to share multiple variables, use a central state management library like Redux.
Center -> Control data flow to components to prevent errors and make maintenance easier.
* Server-side rendering
Recently, server-side rendering is widely used for SEO (Search Engine Optimization), but the window object cannot be accessed from the server-side!!
Thoughts
This was a trial and error I encountered during my first React project.
I've been doing real-world projects with Vue for over 2 years, but when I started a React project,
I was quite surprised that I couldn't display Kakao Map...!!!
Compared to Vue, it feels a bit more free in terms of folder structure and hooks, making it more difficult.
I am thinking a lot about what is the most efficient way to write it.
I need to practice more with this toy project, literally treating it as a toy.
* This is my first blog, and durumis is quite unique and fun.
It also provides a 3-line summary that Koreans love, haha.
Could I meet developers from overseas?
I wish the code editor could be improved a little.
I welcome any feedback or criticism!
Have a happy day!
