{"id":38976,"date":"2024-11-02T02:36:01","date_gmt":"2024-11-02T02:36:01","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=38976"},"modified":"2024-11-26T06:42:45","modified_gmt":"2024-11-26T06:42:45","slug":"react%ec%97%90%ec%84%9c-%ec%a7%80%eb%8f%84-api-%ec%82%ac%ec%9a%a9%ed%95%98%ea%b8%b0-%ea%b8%b0%eb%b3%b8-%ec%84%a4%ec%a0%95-google-maps-leaflet-mapbox%ec%9d%98-%ec%82%ac%ec%9a%a9%eb%b2%95-%eb%b9%84","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/38976\/","title":{"rendered":"React\uc5d0\uc11c \uc9c0\ub3c4 API \uc0ac\uc6a9\ud558\uae30 – \uae30\ubcf8 \uc124\uc815, Google Maps, Leaflet, Mapbox\uc758 \uc0ac\uc6a9\ubc95 \ube44\uad50 \ubc0f \ud658\uacbd \uc124\uc815"},"content":{"rendered":"

<\/p>\n

\n

\ucd5c\uadfc \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc9c0\ub3c4 \uae30\ub2a5\uc740 \uaf2d \ud544\uc694\ud55c \uc694\uc18c\ub85c \uc790\ub9ac \uc7a1\uc558\uc2b5\ub2c8\ub2e4. \uc9c0\ub3c4 API\ub294 \uc0ac\uc6a9\uc790\uac00 \uc704\uce58 \uc815\ubcf4\ub97c \uae30\ubc18\uc73c\ub85c \ub2e4\uc591\ud55c \ub370\uc774\ud130\ub97c \uc2dc\uac01\uc801\uc73c\ub85c \ud45c\ud604\ud560 \uc218 \uc788\uac8c \ud574\uc90d\ub2c8\ub2e4. \uc774\ubc88 \uae00\uc5d0\uc11c\ub294 React\ub97c \uc0ac\uc6a9\ud558\uc5ec Google Maps, Leaflet, Mapbox \ub4f1\uc758 \uc9c0\ub3c4 API\ub97c \uc124\uc815\ud558\uace0 \uc0ac\uc6a9\ud558\ub294 \ubc29\ubc95\uc744 \ube44\uad50\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n

1. React \ud658\uacbd \uc124\uc815<\/h2>\n

\n \uba3c\uc800, React \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud574\uc57c \ud569\ub2c8\ub2e4. Create React App\uc744 \uc0ac\uc6a9\ud558\uc5ec \uac04\ub2e8\ud558\uac8c React \ud658\uacbd\uc744 \uad6c\ucd95\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n <\/p>\n

npx create-react-app my-map-app<\/code><\/pre>\n
\ud504\ub85c\uc81d\ud2b8 \ud3f4\ub354\ub85c \uc774\ub3d9 \ud6c4, \ud544\uc694\ud55c \ud328\ud0a4\uc9c0\ub97c \uc124\uce58\ud569\ub2c8\ub2e4.<\/p>\n
cd my-map-app<\/code><\/pre>\n
2. Google Maps API \uc124\uc815<\/h2>\n
Google Maps\ub294 \ub9e4\uc6b0 \uac15\ub825\ud55c \uc9c0\ub3c4 \uc11c\ube44\uc2a4\ub85c, \ub2e4\uc591\ud55c \uae30\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. Google Maps API\ub97c \uc0ac\uc6a9\ud558\uae30 \uc704\ud574\uc11c\ub294 API \ud0a4\uac00 \ud544\uc694\ud569\ub2c8\ub2e4.<\/p>\n
    \n
  1. Google Cloud Console\uc5d0 \uc811\uc18d\ud558\uc5ec \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/li>\n
  2. API \ubc0f \uc11c\ube44\uc2a4\uc5d0\uc11c ‘Maps JavaScript API’\ub97c \ud65c\uc131\ud654\ud569\ub2c8\ub2e4.<\/li>\n
  3. API \ud0a4\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/li>\n<\/ol>\n
    \uc774\uc81c React \ud504\ub85c\uc81d\ud2b8\uc5d0 Google Maps API\ub97c \ucd94\uac00\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
    npm install @react-google-maps\/api<\/code><\/pre>\n
    Google Maps \ucef4\ud3ec\ub10c\ud2b8 \ub9cc\ub4e4\uae30<\/h3>\n
    \ub2e4\uc74c\uc740 Google Maps\ub97c \uc0ac\uc6a9\ud558\ub294 \uac04\ub2e8\ud55c \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.<\/p>\n
    \nimport React from 'react';\nimport { GoogleMap, LoadScript, Marker } from '@react-google-maps\/api';\n\nconst mapContainerStyle = {\n    height: \"400px\",\n    width: \"800px\"\n};\n\nconst center = {\n    lat: 37.7749, \/\/ \uc704\ub3c4\n    lng: -122.4194 \/\/ \uacbd\ub3c4\n};\n\nconst MyGoogleMap = () => {\n    return (\n        \n            \n                <\/marker>\n            <\/googlemap>\n        <\/loadscript>\n    )\n};\n\nexport default MyGoogleMap;\n        <\/code><\/pre>\n
    \uc0dd\uc131\ud55c MyGoogleMap<\/code> \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc571\uc5d0 \ucd94\uac00\ud569\ub2c8\ub2e4.<\/p>\n
    \nimport React from 'react';\nimport MyGoogleMap from '.\/MyGoogleMap'; \/\/ MyGoogleMap \uacbd\ub85c\uc5d0 \ub9de\uac8c \uc870\uc815\n\nconst App = () => {\n    return (\n        
    \n            
    Google Maps in React<\/h1>\n            <\/mygooglemap>\n        <\/div>\n    );\n};\n\nexport default App;\n        <\/code><\/pre>\n
    3. Leaflet \uc124\uc815<\/h2>\n
    Leaflet\uc740 \uc624\ud508 \uc18c\uc2a4 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c, \uacbd\ub7c9\ud654\ub41c \uc9c0\ub3c4 API\uc785\ub2c8\ub2e4. \uac04\ub2e8\ud558\uace0 \uc0ac\uc6a9\ud558\uae30 \uc26c\uc6b4 API\ub97c \uc81c\uacf5\ud558\uba70, \ube0c\ub77c\uc6b0\uc800 \ud638\ud658\uc131\uc774 \uc88b\uc2b5\ub2c8\ub2e4.<\/p>\n
    Leaflet\uc744 \uc0ac\uc6a9\ud558\uae30 \uc704\ud574 \ud574\ub2f9 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc124\uce58\ud569\ub2c8\ub2e4.<\/p>\n
    npm install react-leaflet leaflet<\/code><\/pre>\n
    Leaflet \ucef4\ud3ec\ub10c\ud2b8 \ub9cc\ub4e4\uae30<\/h3>\n
    \ub2e4\uc74c\uc740 Leaflet\uc744 \uc0ac\uc6a9\ud558\ub294 \uac04\ub2e8\ud55c \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.<\/p>\n
    \nimport React from 'react';\nimport { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';\nimport 'leaflet\/dist\/leaflet.css';\nimport L from 'leaflet';\n\n\/\/ Leaflet\uc5d0\uc11c \ub9c8\ucee4 \uc544\uc774\ucf58 \uc124\uc815\ndelete L.Icon.Default.prototype._getIconUrl;\nL.Icon.Default.mergeOptions({\n    iconRetinaUrl: require('leaflet\/dist\/images\/marker-icon-2x.png'),\n    iconUrl: require('leaflet\/dist\/images\/marker-icon.png'),\n    shadowUrl: require('leaflet\/dist\/images\/marker-shadow.png')\n});\n\nconst MyLeafletMap = () => {\n    const position = [37.7749, -122.4194];\n    \n    return (\n        \n            <\/tilelayer>\n            \n                \ub098\uc758 \uc704\uce58<\/popup>\n            <\/marker>\n        <\/mapcontainer>\n    );\n};\n\nexport default MyLeafletMap;\n        <\/code><\/pre>\n
    \uc9c0\uae08 \uc0dd\uc131\ud55c MyLeafletMap<\/code> \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc571\uc5d0\uc11c \uc0ac\uc6a9\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
    \nimport React from 'react';\nimport MyLeafletMap from '.\/MyLeafletMap'; \/\/ MyLeafletMap \uacbd\ub85c\uc5d0 \ub9de\uac8c \uc870\uc815\n\nconst App = () => {\n    return (\n        
    \n            
    Leaflet in React<\/h1>\n            <\/myleafletmap>\n        <\/div>\n    );\n};\n\nexport default App;\n        <\/code><\/pre>\n
    4. Mapbox \uc124\uc815<\/h2>\n
    Mapbox\ub294 \uc0ac\uc6a9\uc790 \uc815\uc758 \uc9c0\ub3c4 \ubc0f \ub370\uc774\ud130 \uc2dc\uac01\ud654 \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\ub294 \uc720\ub8cc \uc9c0\ub3c4 API\uc785\ub2c8\ub2e4. Mapbox\ub97c \uc0ac\uc6a9\ud558\uae30 \uc704\ud574\uc11c\ub294 Mapbox \uacc4\uc815\uc774 \ud544\uc694\ud558\uba70, API \ud0a4\ub97c \ubc1c\uae09\ubc1b\uc544\uc57c \ud569\ub2c8\ub2e4.<\/p>\n
      \n
    1. Mapbox \uacf5\uc2dd \uc6f9\uc0ac\uc774\ud2b8\uc5d0 \uac00\uc785\ud558\uc5ec \uacc4\uc815\uc744 \ub9cc\ub4ed\ub2c8\ub2e4.<\/li>\n
    2. \ub300\uc2dc\ubcf4\ub4dc\uc5d0\uc11c API \ud0a4\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/li>\n<\/ol>\n
      Mapbox\ub97c React \ud504\ub85c\uc81d\ud2b8\uc5d0 \uc124\uce58\ud569\ub2c8\ub2e4.<\/p>\n
      npm install react-map-gl mapbox-gl<\/code><\/pre>\n
      Mapbox \ucef4\ud3ec\ub10c\ud2b8 \ub9cc\ub4e4\uae30<\/h3>\n
      \uc544\ub798\ub294 Mapbox\ub97c \uc0ac\uc6a9\ud558\ub294 \uc608\uc2dc \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.<\/p>\n
      \nimport React from 'react';\nimport { StaticMap, MapContext } from 'react-map-gl';\n\nconst MyMapboxMap = () => {\n    const mapboxApiKey = 'YOUR_MAPBOX_API_KEY';\n    const viewport = {\n        width: 800,\n        height: 400,\n        latitude: 37.7749,\n        longitude: -122.4194,\n        zoom: 10\n    };\n\n    return (\n        \n            <\/staticmap>\n        <\/mapcontext.provider>\n    );\n};\n\nexport default MyMapboxMap;\n        <\/code><\/pre>\n
      \uc0dd\uc131\ud55c MyMapboxMap<\/code> \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc571\uc5d0 \ucd94\uac00\ud569\ub2c8\ub2e4.<\/p>\n
      \nimport React from 'react';\nimport MyMapboxMap from '.\/MyMapboxMap'; \/\/ MyMapboxMap \uacbd\ub85c\uc5d0 \ub9de\uac8c \uc870\uc815\n\nconst App = () => {\n    return (\n        
      \n            
      Mapbox in React<\/h1>\n            <\/mymapboxmap>\n        <\/div>\n    );\n};\n\nexport default App;\n        <\/code><\/pre>\n
      5. \uc9c0\ub3c4 API \ube44\uad50<\/h2>\n
      \uc138 \uac00\uc9c0 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc778 Google Maps, Leaflet, Mapbox \uac01\uac01 \uc7a5\ub2e8\uc810\uc774 \uc788\uc2b5\ub2c8\ub2e4. \uac01\uac01\uc758 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \ube44\uad50\ud574\ubcf4\uba74 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n\n\n\n\n\n
      \ud2b9\uc9d5<\/th>\nGoogle Maps<\/th>\nLeaflet<\/th>\nMapbox<\/th>\n<\/tr>\n<\/thead>\n
      \uc0ac\uc6a9 \uc6a9\uc774\uc131<\/td>\n\ub9e4\uc6b0 \uc26c\uc6c0<\/td>\n\uc26c\uc6c0<\/td>\n\uc57d\uac04 \uc5b4\ub824\uc6c0<\/td>\n<\/tr>\n
      \uac00\uaca9<\/td>\n\uc720\ub8cc<\/td>\n\ubb34\ub8cc<\/td>\n\uc720\ub8cc<\/td>\n<\/tr>\n
      \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5<\/td>\n\uc81c\ud55c\uc801<\/td>\n\ub192\uc74c<\/td>\n\ub9e4\uc6b0 \ub192\uc74c<\/td>\n<\/tr>\n
      \uae30\ub2a5<\/td>\n\ub2e4\uc591\ud568<\/td>\n\uae30\ubcf8 \uae30\ub2a5<\/td>\n\ub370\uc774\ud130 \uc2dc\uac01\ud654 \uac15\ub825\ud568<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      6. \uacb0\ub860<\/h2>\n
      \n            \uc774\ubc88 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c\ub294 React\uc5d0\uc11c \uc9c0\ub3c4 API\ub97c \uc0ac\uc6a9\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uc558\uc2b5\ub2c8\ub2e4. Google Maps, Leaflet, Mapbox \uac01\uac01\uc758 \uc7a5\ub2e8\uc810\uc744 \uc0b4\ud3b4\ubcf4\uc558\uc73c\uba70, \uac01 API\ub97c React\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 \ubc29\ubc95\uc744 \uad6c\uccb4\uc801\uc73c\ub85c \uc0b4\ud3b4\ubcf4\uc558\uc2b5\ub2c8\ub2e4. \ud504\ub85c\uc81d\ud2b8\uc758 \uc694\uad6c\uc0ac\ud56d\uc5d0 \ub9de\ub294 \uc801\uc808\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc120\ud0dd\ud558\uc5ec \uc0ac\uc6a9\ud558\uc2dc\uae30 \ubc14\ub78d\ub2c8\ub2e4.\n        <\/p>\n
      7. \ucc38\uace0 \ub9c1\ud06c<\/h2>\n