이번 포스트에서는 리액트 애플리케이션에서 구글 맵 API를 사용하여 커스텀 마커와 정보창을 만들어보겠습니다. 사용자가 마커를 클릭했을 때 팝업 형태로 정보를 표시하는 기능을 구현해볼 것입니다. 이를 통해 지도 애플리케이션을 더욱 풍부하게 만들 수 있습니다.

준비하기

우선, 구글 맵을 사용할 수 있도록 준비가 필요합니다. 다음 단계를 따라 구글 API 키를 생성해 주세요:

1. 구글 클라우드 플랫폼에 로그인합니다.
2. 새 프로젝트를 생성합니다.
3. API 및 서비스 > 라이브러리에서 ‘Maps JavaScript API’를 검색하고 활성화합니다.
4. API 및 서비스 > 사용자 인증 정보에서 ‘API 키’를 생성합니다.

리액트 애플리케이션 생성

리액트 애플리케이션을 생성하려면, 아래의 명령을 터미널에 입력합니다.

npx create-react-app my-maps-app

이제 애플리케이션 폴더로 이동합니다.

cd my-maps-app

구글 맵 API 설치

구글 맵 API를 사용하기 위해 react-google-maps/api 패키지를 설치합니다. 터미널에 아래의 명령어를 입력하세요:

npm install @react-google-maps/api

기본 맵 컴포넌트 만들기

src 폴더 아래에 Map.js 파일을 생성하고, 기본적인 맵 컴포넌트를 구성합니다.

import React from 'react';
import { GoogleMap, LoadScript } from '@react-google-maps/api';

const mapContainerStyle = {
    width: '100%',
    height: '400px'
};

const center = {
    lat: 37.5665,
    lng: 126.978
};

const Map = () => {
    return (
        
            
                {/* 마커와 정보창은 여기서 추가할 것입니다 */}
            
        
    );
};

export default Map;

위 코드에서 YOUR_API_KEY를 구글 클라우드 플랫폼에서 발급받은 API 키로 교체하세요.

커스텀 마커 추가하기

이제 커스텀 마커를 추가해보겠습니다. 앞서 작성한 Map 컴포넌트에 Marker와 InfoWindow를 추가합니다.

import React, { useState } from 'react';
import { GoogleMap, LoadScript, Marker, InfoWindow } from '@react-google-maps/api';

const mapContainerStyle = {
    width: '100%',
    height: '400px'
};

const center = {
    lat: 37.5665,
    lng: 126.978
};

const Map = () => {
    const [selected, setSelected] = useState(null);

    const markers = [
        {
            id: 1,
            name: '서울시청',
            position: { lat: 37.5665, lng: 126.978 },
            info: '서울특별시 중구 세종대로 110'
        },
        {
            id: 2,
            name: '남산타워',
            position: { lat: 37.5512, lng: 126.9882 },
            info: '서울특별시 용산구 남산공원길 105'
        }
    ];

    return (
        
            
                {markers.map(marker => (
                     setSelected(marker)}
                    />
                ))}
                
                {selected && (
                     setSelected(null)}
                    >
                        

                            
{selected.name}
                            
{selected.info}
                        
                    
                )}
            
        
    );
};

export default Map;

컴포넌트 통합하기

이제 Map 컴포넌트를 App.js에서 사용해보겠습니다. src/App.js 파일을 열고 아래와 같이 수정하세요:

import React from 'react';
import './App.css';
import Map from './Map';

const App = () => {
    return (
        

            
리액트 커스텀 마커 만들기 예제
            
        
    );
};

export default App;

결과 확인하기

모든 준비가 완료되었습니다. 이제 애플리케이션을 실행해보겠습니다. 터미널에 아래의 명령어를 입력하세요:

npm start

브라우저에서 http://localhost:3000으로 이동하면 구현한 구글 맵과 커스텀 마커가 나타나는 것을 확인할 수 있습니다. 마커를 클릭하면 정보창이 표시됩니다.

결론

이번 포스트에서는 리액트에서 구글 맵 API를 활용해 커스텀 마커 및 정보창을 만드는 방법에 대해 알아보았습니다. 마커를 클릭할 때마다 다양한 정보를 표시할 수 있도록 구성하여, 여러분의 애플리케이션을 더 인터랙티브하게 만들 수 있습니다. 앞으로도 구글 맵 API를 이용해 더욱 다양한 기능을 추가해보길 바랍니다.

부록: 추가 기능 아이디어

• 사용자 위치 기반 마커 표시하기
• 다양한 아이콘 사용하기 (마커의 디자인 변경)
• 마커 클러스터링 사용하기

추가로 다양한 기능을 구현함으로써, 애플리케이션에 더 많은 가치를 부여해보세요.

React는 컴포넌트 기반의 사용자 인터페이스를 구축하는 데 매우 효율적입니다. 그러나 애플리케이션이 복잡해짐에 따라 상태 관리는 더욱 어려워질 수 있습니다. 이럴 때 Redux와 같은 상태 관리 라이브러리를 사용하는 것이 유용합니다. Redux는 전역 상태를 중앙 집중식으로 관리하는 라이브러리로, 복잡한 React 애플리케이션에서 상태를 예측 가능하게 유지할 수 있게 도와줍니다. 이번 글에서는 Redux를 사용하여 상태를 관리하는 방법과 액션 및 리듀서를 통한 상태 변경에 관해 자세히 설명하겠습니다.

Redux란 무엇인가?

Redux는 JavaScript 애플리케이션에서 전역 상태를 관리하기 위한 라이브러리입니다. 애플리케이션의 모든 상태를 하나의 중앙 저장소(store)에 보관하며, 이 저장소는 액션(action)을 통해 상태를 업데이트합니다. Redux를 사용하면 애플리케이션의 상태 변화가 일관되고 예측 가능해지며, 유지보수와 디버깅이 쉬워집니다.

Redux의 주요 개념

• Store: 애플리케이션의 상태를 저장하는 객체입니다. Redux에서는 오직 하나의 Store만을 사용합니다.
• Action: 상태 변화의 목적을 설명하는 객체입니다. Action은 type 속성을 반드시 가져야 하며, 필요에 따라 추가적인 데이터를 포함할 수 있습니다.
• Reducer: 현재 상태와 액션을 인수로 받아 새로운 상태를 반환하는 순수 함수입니다. Reducer는 상태를 변경하는 로직을 포함하고 있습니다.

Redux 설치 및 기본 설정

Redux를 설치하려면, npm 또는 yarn을 사용할 수 있습니다. 아래 명령어를 통해 Redux 및 React-Redux를 설치합니다.

npm install redux react-redux

프로젝트 구조 설정

간단한 Todo 앱의 예제를 통해 Redux를 어떻게 사용하는지 보여드리겠습니다. 아래와 같은 프로젝트 구조를 설정합니다.

my-todo-app/
|-- src/
|   |-- components/
|   |   |-- TodoList.js
|   |   |-- TodoItem.js
|   |-- actions/
|   |   |-- todoActions.js
|   |-- reducers/
|   |   |-- todoReducer.js
|   |-- store/
|   |   |-- store.js
|   |-- App.js
|   |-- index.js

액션(Action) 정의하기

액션은 상태를 업데이트하기 위한 “신호”입니다. 액션에는 반드시 type 속성이 있어야 하며, 추가적인 데이터(payload)를 가질 수 있습니다. 아래는 Todo와 관련된 액션들을 정의한 todoActions.js입니다.

// src/actions/todoActions.js

export const ADD_TODO = 'ADD_TODO';
export const REMOVE_TODO = 'REMOVE_TODO';
export const TOGGLE_TODO = 'TOGGLE_TODO';

export const addTodo = (todo) => ({
    type: ADD_TODO,
    payload: todo,
});

export const removeTodo = (id) => ({
    type: REMOVE_TODO,
    payload: id,
});

export const toggleTodo = (id) => ({
    type: TOGGLE_TODO,
    payload: id,
});

리듀서(Reducer) 정의하기

리듀서는 액션을 처리하여 새로운 상태를 반환하는 순수 함수입니다. 아래는 Todo 리듀서의 구현 예시입니다.

// src/reducers/todoReducer.js

import { ADD_TODO, REMOVE_TODO, TOGGLE_TODO } from '../actions/todoActions';

const initialState = {
    todos: [],
};

const todoReducer = (state = initialState, action) => {
    switch (action.type) {
        case ADD_TODO:
            return {
                ...state,
                todos: [...state.todos, { id: Date.now(), text: action.payload, completed: false }],
            };
        case REMOVE_TODO:
            return {
                ...state,
                todos: state.todos.filter(todo => todo.id !== action.payload),
            };
        case TOGGLE_TODO:
            return {
                ...state,
                todos: state.todos.map(todo =>
                    todo.id === action.payload ? { ...todo, completed: !todo.completed } : todo
                ),
            };
        default:
            return state;
    }
};

export default todoReducer;

스토어(Store) 설정하기

Redux에서 스토어는 애플리케이션의 상태를 저장하고 액션을 디스패치하는 역할을 합니다. 아래는 스토어 설정을 위한 예제입니다.

// src/store/store.js

import { createStore } from 'redux';
import todoReducer from '../reducers/todoReducer';

const store = createStore(todoReducer);

export default store;

React 앱과 Redux 연동하기

React 애플리케이션에 Redux 스토어를 연결하기 위해서는 Provider 컴포넌트를 사용해야 합니다. Provider 컴포넌트는 애플리케이션 최상위에서 Redux의 스토어를 전달합니다.

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store/store';
import App from './App';

ReactDOM.render(
    
        
    ,
    document.getElementById('root')
);

컴포넌트에서 Redux 상태와 액션 사용하기

이제 Redux 스토어를 React 컴포넌트와 연결하여 상태를 읽고 액션을 디스패치할 수 있습니다. 아래는 Todo 리스트를 구현한 컴포넌트입니다.

// src/components/TodoList.js

import React, { useState } from 'react';
import { connect } from 'react-redux';
import { addTodo, removeTodo, toggleTodo } from '../actions/todoActions';
import TodoItem from './TodoItem';

const TodoList = ({ todos, addTodo, removeTodo, toggleTodo }) => {
    const [inputValue, setInputValue] = useState('');

    const handleAddTodo = () => {
        if (inputValue) {
            addTodo(inputValue);
            setInputValue('');
        }
    };

    return (
        

            
Todo List
             setInputValue(e.target.value)}
            />
            Add Todo
            

                {todos.map(todo => (
                    
                ))}
            
        
    );
};

const mapStateToProps = (state) => ({
    todos: state.todos,
});

const mapDispatchToProps = {
    addTodo,
    removeTodo,
    toggleTodo,
};

export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

TodoItem 컴포넌트 구현하기

아래는 개별 Todo 항목을 나타내는 컴포넌트입니다. 사용자가 Todo 항목을 클릭하면 완료 상태가 토글됩니다.

// src/components/TodoItem.js

import React from 'react';

const TodoItem = ({ todo, removeTodo, toggleTodo }) => {
    return (
        

            {todo.text}
             toggleTodo(todo.id)}>Toggle
             removeTodo(todo.id)}>Remove
        
    );
};

export default TodoItem;

최종 결과

위의 코드 구조를 통해 간단한 Todo 애플리케이션을 만들었습니다. Redux를 사용하여 상태를 중앙 집중식으로 관리하게 되면, 상태의 변화가 매우 명확해지고, 애플리케이션의 유지보수가 수월해집니다. 또한, Redux DevTools를 활용하면 상태 변화의 기록을 쉽게 추적할 수 있어 디버깅이 용이합니다.

Redux의 장점과 단점

장점

• 예측 가능한 상태 관리: 상태의 변화가 특정 액션에 명확하게 연결됩니다.
• 디버깅 용이: Redux DevTools를 통해 상태 변경을 추적할 수 있습니다.
• 상태의 중앙 집중화: 여러 컴포넌트에서 동일한 상태에 접근할 수 있습니다.

단점

• 보일러플레이트 코드: 액션과 리듀서를 정의해야 하므로 코드 양이 증가합니다.
• 학습 곡선: 초기 설정이 복잡할 수 있으며, Redux의 개념을 이해하는 데 시간이 필요합니다.

결론

Redux는 React 애플리케이션의 상태 관리를 위한 강력한 도구입니다. 본 글에서는 Redux의 기본 개념, 액션과 리듀서를 활용한 상태 변경, 그리고 React와의 결합 방법을 설명했습니다. 실제 프로젝트에서 Redux를 사용하면 상태 관리가 훨씬 수월해지며, 애플리케이션의 구조를 더욱 효율적으로 유지할 수 있습니다.

앞으로도 Redux와 관련된 고급 기능들, 예를 들어 미들웨어, 비동기 작업 처리 등을 다룰 예정이니 관심을 가지고 지켜봐 주시기 바랍니다.