React - How to Solve the 'kakao is not defined' Error

• Problem
• Solution
• Reason
• Thoughts
  
  
  

Problem

While integrating the Kakao Map API in a React 18 environment using create-react-app, the map wasn't rendering!

Since I inserted a script tag within the head tag, I thought it would load before the browser rendering.

**The HTML is written, but it's not showing up!!**

~Roughly, the code to load the Kakao Map inside the head tag of index.html~

However, in the console, only "kakao is not defined" was recorded, and nothing was rendered.

Solution

Fundamentals: React components do not directly access global objects.

Solution 1-1

Declare the kakao property outside the component function by extracting it from the global object.

Solution 1-2

Create a separate custom hook for the functions needed to render the Kakao Map.

Drag events, click events, and marker handling, which are generally necessary functions for the map,

are better separated into a custom hook

rather than implementing them within the component itself, in terms of reusability and readability.

Reason

It's necessary to understand the React concept behind why React avoids accessing global objects.

1) Encapsulation and Modularity

- Each component should be independent and reusable. Relying on global objects in numerous components compromises independence and can lead to significant complexity.

2) Performance and Easy Maintenance

- React re-renders when the state changes, and global objects aren't suitable for tracking state changes.

3) Centralized State Management

- If you still need to share multiple variables, utilize a centralized state management library like Redux.

Centralized -> Controls the data flow to components, preventing errors and simplifying maintenance.

* Server-Side Rendering

Recently, server-side rendering has become widely used for SEO (Search Engine Optimization), but the window object cannot be accessed on the server-side!!

Thoughts

These are the trial and errors I encountered during my first React project.

I've been working with Vue for over two years, but when I started a React project,

I was quite surprised that I couldn't display the Kakao Map...!!!

Compared to Vue, React feels a bit more free-flowing with its folder structure and hooks, making it somewhat difficult.

It makes me think a lot about the most efficient way to write code.

I need to get more familiar with it by treating this toy project, as the name suggests, like a toy.

* durumis is quite unique and interesting for a first-time blog experience.

It also provides the 3-point summary that Koreans love haha.

Perhaps I can meet some overseas developers too?

The code editor could use some improvements though.

I welcome discussions and feedback~!

Have a wonderful day!