{"id":39065,"date":"2024-11-02T02:36:44","date_gmt":"2024-11-02T02:36:44","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=39065"},"modified":"2024-11-26T06:42:32","modified_gmt":"2024-11-26T06:42:32","slug":"%ec%a7%80%eb%8f%84%ec%99%80-%eb%8d%b0%ec%9d%b4%ed%84%b0-%ec%8b%9c%ea%b0%81%ed%99%94-%ec%97%b0%eb%8f%99%ed%95%98%ea%b8%b0-%ed%8a%b9%ec%a0%95-%eb%b2%94%ec%9c%84-%eb%82%b4%ec%9d%98-%eb%8d%b0%ec%9d%b4","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/39065\/","title":{"rendered":"\uc9c0\ub3c4\uc640 \ub370\uc774\ud130 \uc2dc\uac01\ud654 \uc5f0\ub3d9\ud558\uae30, \ud2b9\uc815 \ubc94\uc704 \ub0b4\uc758 \ub370\uc774\ud130 \ud544\ud130\ub9c1 \ubc0f \uc2dc\uac01\ud654"},"content":{"rendered":"

\uc624\ub298\ub0a0 \ub370\uc774\ud130 \uc2dc\uac01\ud654\ub294 \ub2e4\uc591\ud55c \ubd84\uc57c\uc5d0\uc11c \ud544\uc218\uc801\uc778 \uae30\uc220\ub85c \uc790\ub9ac \uc7a1\uace0 \uc788\uc2b5\ub2c8\ub2e4. \ud2b9\ud788, \uc9c0\ub9ac\uc801 \ub370\uc774\ud130\ub97c \uc2dc\uac01\ud654\ud560 \ub54c\ub294 \uc885\uc885 \uc9c0\ub3c4\uc640 \uac19\uc740 \uc2dc\uac01\uc801 \ub3c4\uad6c\uac00 \ud65c\uc6a9\ub429\ub2c8\ub2e4. \uc774\ubc88 \uac15\uc88c\uc5d0\uc11c\ub294 React\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc9c0\ub3c4\uc640 \ub370\uc774\ud130\ub97c \uc5f0\ub3d9\ud558\uace0, \ud2b9\uc815 \ubc94\uc704 \ub0b4\uc758 \ub370\uc774\ud130\ub97c \ud544\ud130\ub9c1\ud558\uc5ec \uc2dc\uac01\ud654\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uac1c\uc120\ud558\uace0, \ub370\uc774\ud130 \uac04\uc758 \uad00\uacc4\ub97c \uba85\ud655\ud558\uac8c \uc774\ud574\ud560 \uc218 \uc788\ub294 \ubc29\ubc95\uc744 \ubc30\uc6b8 \uac83\uc785\ub2c8\ub2e4.<\/p>\n

1. \ud504\ub85c\uc81d\ud2b8 \uc124\uc815<\/h2>\n

\uc2dc\uc791\ud558\uae30\uc5d0 \uc55e\uc11c React \ud504\ub85c\uc81d\ud2b8\ub97c \uc124\uc815\ud574\uc57c \ud569\ub2c8\ub2e4. Create React App\uc744 \uc0ac\uc6a9\ud558\uc5ec \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc544\ub798\uc758 \uba85\ub839\uc5b4\ub97c \uc2e4\ud589\ud569\ub2c8\ub2e4:<\/p>\n

npx create-react-app map-data-visualization<\/code><\/pre>\n
\ud504\ub85c\uc81d\ud2b8 \ud3f4\ub354\ub85c \uc774\ub3d9\ud55c \ud6c4, \ud544\uc694\ud55c \ud328\ud0a4\uc9c0\ub97c \uc124\uce58\ud569\ub2c8\ub2e4. \uc6b0\ub9ac\ub294 \uc9c0\ub3c4 \uc2dc\uac01\ud654\uc5d0 react-leaflet<\/code>\uc744 \uc0ac\uc6a9\ud558\uace0, \ub370\uc774\ud130 \uad00\ub9ac\ub97c \uc704\ud574 axios<\/code>\ub97c \uc0ac\uc6a9\ud560 \uac83\uc785\ub2c8\ub2e4. \uc544\ub798\uc758 \uba85\ub839\uc5b4\ub97c \uc774\uc6a9\ud574 \uc124\uce58\ud569\ub2c8\ub2e4:<\/p>\n
cd map-data-visualization\nnpm install leaflet react-leaflet axios<\/code><\/pre>\n
2. \uae30\ubcf8 \uad6c\uc870 \uc124\uc815<\/h2>\n
\ud504\ub85c\uc81d\ud2b8\uc758 \uae30\ubcf8 \uad6c\uc870\ub97c \uc124\uc815\ud569\ub2c8\ub2e4. src<\/code> \ud3f4\ub354 \ub0b4\uc5d0 MapComponent.js<\/code>\ub77c\ub294 \uc0c8 \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0, \ub2e4\uc74c\uc758 \uae30\ubcf8 \ucf54\ub4dc\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4:<\/p>\n
import React from 'react';\nimport { MapContainer, TileLayer } from 'react-leaflet';\nimport 'leaflet\/dist\/leaflet.css';\n\nconst MapComponent = () => {\n  return (\n    \n      <\/tilelayer>\n    <\/mapcontainer>\n  );\n};\n\nexport default MapComponent;<\/code><\/pre>\n
\uc704\uc758 \ucf54\ub4dc\ub294 \uae30\ubcf8 \uc9c0\ub3c4\ub97c \ud45c\uc2dc\ud569\ub2c8\ub2e4. \uc9c0\ub3c4\ub294 OpenStreetMap\uc758 \ud0c0\uc77c \ub808\uc774\uc5b4\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub80c\ub354\ub9c1\ub429\ub2c8\ub2e4.<\/p>\n
3. \ub370\uc774\ud130 \uac00\uc838\uc624\uae30<\/h2>\n
\ub2e4\uc74c \ub2e8\uacc4\ub85c, \uc678\ubd80 API \ub610\ub294 \ub85c\uceec \ud30c\uc77c\uc5d0\uc11c \ub370\uc774\ud130\ub97c \uac00\uc838\uc624\ub294 \ubc29\ubc95\uc744 \uc124\uc815\ud569\ub2c8\ub2e4. \uc774\ubc88 \uc608\uc81c\uc5d0\uc11c\ub294 \uc778\uc99d\ub41c \uc624\ud508 API\uc5d0\uc11c GeoJSON \ud615\uc2dd\uc758 \ub370\uc774\ud130\ub97c \uac00\uc838\uc624\ub294 \uc608\ub97c \uc0ac\uc6a9\ud558\uaca0\uc2b5\ub2c8\ub2e4. axios<\/code> \ud328\ud0a4\uc9c0\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub370\uc774\ud130\ub97c \uac00\uc838\uc635\ub2c8\ub2e4:<\/p>\n
import React, { useEffect, useState } from 'react';\nimport axios from 'axios';\n\nconst useFetchData = () => {\n  const [data, setData] = useState([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState(null);\n\n  useEffect(() => {\n    const fetchData = async () => {\n      try {\n        const response = await axios.get('YOUR_API_URL');\n        setData(response.data.features); \/\/ GeoJSON \ud615\uc2dd\uc73c\ub85c \uac00\uc815\n      } catch (error) {\n        setError(error);\n      } finally {\n        setLoading(false);\n      }\n    };\n\n    fetchData();\n  }, []);\n\n  return { data, loading, error };\n};\n\nexport default useFetchData;<\/code><\/pre>\n
\uc704\uc758 \ucf54\ub4dc\ub294 API\uc5d0\uc11c \ub370\uc774\ud130\ub97c \ube44\ub3d9\uae30\uc801\uc73c\ub85c \uac00\uc838\uc624\ub294 \ud6c5\uc744 \uc124\uc815\ud569\ub2c8\ub2e4. \uac00\uc838\uc628 \ub370\uc774\ud130\ub294 GeoJSON \ud615\uc2dd\uc73c\ub85c \uac00\uc815\ud558\uace0, features<\/code> \ubc30\uc5f4\uc744 \uc0c1\ud0dc\ub85c \uc124\uc815\ud569\ub2c8\ub2e4.<\/p>\n
4. \uc9c0\ub3c4\uc5d0 \ub370\uc774\ud130 \uc2dc\uac01\ud654\ud558\uae30<\/h2>\n
\ub370\uc774\ud130\ub97c \uac00\uc838\uc628 \ud6c4\uc5d0\ub294 \ud574\ub2f9 \ub370\uc774\ud130\ub97c \uc9c0\ub3c4\uc5d0 \uc2dc\uac01\ud654\ud574\uc57c \ud569\ub2c8\ub2e4. \uc774 \ub2e8\uacc4\uc5d0\uc11c\ub294 \uac00\uc838\uc628 GeoJSON \ub370\uc774\ud130\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub9c8\ucee4\ub098 \ud3f4\ub9ac\ub77c\uc778\uc744 \ucd94\uac00\ud569\ub2c8\ub2e4:<\/p>\n
import React from 'react';\nimport { GeoJSON } from 'react-leaflet';\n\nconst DataLayer = ({ data }) => {\n  return <\/geojson>;\n};\n\nexport default DataLayer;<\/code><\/pre>\n
\uc704\uc758 DataLayer<\/code> \ucef4\ud3ec\ub10c\ud2b8\ub294 GeoJSON \ub370\uc774\ud130\ub97c \ubc1b\uc544\uc11c \uc9c0\ub3c4\uc5d0 \ub9c8\ud06c\uc5c5\ud569\ub2c8\ub2e4. \uc774 \ub370\uc774\ud130\ub294 \uc9c0\ub3c4\uc5d0 \ud45c\uc2dc\ud560 \ud615\ud0dc\ub85c \ubcc0\ud658\ub418\uc5b4\uc57c \ud558\uba70, \uac01 \ud53c\ucc98\ub294 \uc62c\ubc14\ub974\uac8c \uc2a4\ud0c0\uc77c\ub9c1\ub418\uc5b4\uc57c \ud569\ub2c8\ub2e4.<\/p>\n
5. \ud2b9\uc815 \ubc94\uc704 \ub0b4\uc758 \ub370\uc774\ud130 \ud544\ud130\ub9c1<\/h2>\n
\uc0ac\uc6a9\uc790\uac00 \ud2b9\uc815 \ubc94\uc704\ub97c \uc120\ud0dd\ud560 \uc218 \uc788\ub3c4\ub85d \ud544\ud130\ub9c1 \uae30\ub2a5\uc744 \ucd94\uac00\ud569\ub2c8\ub2e4. \uc8fc\ub85c \uc9c0\ub3c4\uc758 \ubc94\uc704\ub97c \uac10\uc9c0\ud558\uc5ec \uadf8 \uc548\uc5d0 \uc788\ub294 \ub370\uc774\ud130\ub9cc \ud544\ud130\ub9c1\ud558\ub294 \ubc29\uc2dd\uc73c\ub85c \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. Leaflet\uc758 map.getBounds()<\/code> \uba54\uc11c\ub4dc\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud604\uc7ac \ubcf4\uc774\ub294 \uc601\uc5ed\uc744 \ud655\uc778\ud569\ub2c8\ub2e4:<\/p>\n
const MapComponent = () => {\n  const { data, loading, error } = useFetchData();\n  const [filteredData, setFilteredData] = useState([]);\n\n  const mapRef = useRef();\n\n  const handleBoundsChange = () => {\n    const bounds = mapRef.current.getBounds();\n    const filtered = data.filter(feature => {\n      const coords = feature.geometry.coordinates;\n      return (\n        coords[0] >= bounds.getSouthWest().lng &&\n        coords[0] <= bounds.getNorthEast().lng &&\n        coords[1] >= bounds.getSouthWest().lat &&\n        coords[1] <= bounds.getNorthEast().lat\n      );\n    });\n    setFilteredData(filtered);\n  };\n\n  return (\n    \n      <\/tilelayer>\n      <\/datalayer>\n    <\/mapcontainer>\n  );\n};<\/code><\/pre>\n
\uc704\uc758 \ucf54\ub4dc\uc5d0\uc11c \ubcf4\uc774\ub294 \uac83\ucc98\ub7fc, onViewportChanged<\/code> \uc774\ubca4\ud2b8\ub97c \ud65c\uc6a9\ud558\uc5ec \uc9c0\ub3c4\uc758 \ubc94\uc704\uac00 \ubcc0\uacbd\ub420 \ub54c\ub9c8\ub2e4 filteredData<\/code>\ub97c \uc5c5\ub370\uc774\ud2b8\ud558\uac8c \ub429\ub2c8\ub2e4.<\/p>\n
6. \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4 \uac1c\uc120<\/h2>\n
\uc0ac\uc6a9\uc790\uc5d0\uac8c \ubcf4\ub2e4 \ub098\uc740 \uacbd\ud5d8\uc744 \uc81c\uacf5\ud558\uae30 \uc704\ud574 \ud544\ud130\ub9c1\ub41c \ub370\uc774\ud130\uc758 \uc218\ub97c \uc0ac\uc6a9\uc790\uc5d0\uac8c \ud45c\uc2dc\ud558\ub294 \uae30\ub2a5\uc744 \ucd94\uac00\ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \uc0ac\uc6a9\uc790\ub294 \ud604\uc7ac \ubcf4\uc774\ub294 \ubc94\uc704\uc758 \ub370\uc774\ud130 \uc591\uc744 \uc27d\uac8c \uc774\ud574\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n
const MapComponent = () => {\n  \/\/ ...\uc774\uc804 \ucf54\ub4dc\uc640 \ub3d9\uc77c...\n\n  return (\n    
\n      
\ud604\uc7ac \ubc94\uc704 \ub0b4 \ub370\uc774\ud130 \uc218: {filteredData.length}<\/h2>\n      \n        <\/tilelayer>\n        <\/datalayer>\n      <\/mapcontainer>\n    <\/div>\n  );\n};<\/code><\/pre>\n
7. \ub9c8\ubb34\ub9ac \ubc0f \uc131\ub2a5 \ucd5c\uc801\ud654<\/h2>\n
\uc131\ub2a5\uc744 \ucd5c\uc801\ud654\ud558\uae30 \uc704\ud574, \ub370\uc774\ud130\uac00 \ub9ce\uc544\uc9c8 \uacbd\uc6b0 \uc801\uc808\ud55c \uc804\ub7b5\uc744 \uc138\uc6cc\uc57c \ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \uc0ac\uc6a9\uc790\uac00 \uc9c0\ub3c4\uc758 \ubc94\uc704\ub97c \uc870\uc815\ud560 \ub54c\ub9c8\ub2e4 API\ub97c \ud638\ucd9c\ud574 \ub370\uc774\ud130\ub97c \uac00\uc838\uc624\ub294 \uac83\ubcf4\ub2e4, \ud544\uc694\ud55c \ub370\uc774\ud130 \uc804\uccb4\ub97c \ud55c \ubc88\uc5d0 \uac00\uc838\uc624\uace0 \ud504\ub860\ud2b8\uc5d4\ub4dc\uc5d0\uc11c \ud544\ud130\ub9c1\ud558\ub294 \uac83\uc774 \ub354 \ud6a8\uc728\uc801\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\uc774\uc640 \uac19\uc774 React\ub97c \ud1b5\ud574 \uc9c0\ub3c4\uc640 \ub370\uc774\ud130\ub97c \uc5f0\ub3d9\ud558\uc5ec \uc2dc\uac01\ud654\ud558\ub294 \ubc29\ubc95\uc744 \uc0b4\ud3b4\ubcf4\uc558\uc2b5\ub2c8\ub2e4. \ub2e4\uc591\ud55c \ub370\uc774\ud130 \uc18c\uc2a4\ub97c \uc5f0\ub3d9\ud558\uace0, \uc0ac\uc6a9\uc790 \uc0c1\ud638\uc791\uc6a9\uc744 \ud1b5\ud574 \ud544\ud130\ub9c1\ud558\ub294 \uae30\ub2a5\uc744 \uad6c\ud604\ud558\uc5ec \uc0ac\uc6a9\uc790\uc758 \uacbd\ud5d8\uc744 \uac1c\uc120\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ubc88 \uac15\uc88c\ub97c \ud1b5\ud574 \uc313\uc740 \uc9c0\uc2dd\uc744 \ud65c\uc6a9\ud558\uc5ec \ubcf4\ub2e4 \ubcf5\uc7a1\ud55c \ub370\uc774\ud130 \uc2dc\uac01\ud654 \ud504\ub85c\uc81d\ud2b8\ub85c \ub098\uc544\uac00\uae38 \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n
8. \ucd94\uac00 \ub9ac\uc18c\uc2a4<\/h2>\n
\uc544\ub798\ub294 \ucd94\uac00 \ud559\uc2b5\uc5d0 \ub3c4\uc6c0\uc774 \ub420 \uc218 \uc788\ub294 \ub9ac\uc18c\uc2a4\uc785\ub2c8\ub2e4:<\/p>\n