{"id":38924,"date":"2024-11-02T02:35:40","date_gmt":"2024-11-02T02:35:40","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=38924"},"modified":"2024-11-26T06:42:57","modified_gmt":"2024-11-26T06:42:57","slug":"react%eb%a1%9c-%ec%9c%84%ec%b9%98-%ea%b8%b0%eb%b0%98-%ec%84%9c%eb%b9%84%ec%8a%a4-%ec%95%a0%ed%94%8c%eb%a6%ac%ec%bc%80%ec%9d%b4%ec%85%98-%eb%a7%8c%eb%93%a4%ea%b8%b0-%ec%a7%80%eb%8f%84%ec%99%80","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/38924\/","title":{"rendered":"React\ub85c \uc704\uce58 \uae30\ubc18 \uc11c\ube44\uc2a4 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ub9cc\ub4e4\uae30, \uc9c0\ub3c4\uc640 \ub300\ud654\ud615 \ud544\ud130\ub97c \ud1b5\ud55c \uad00\uad11\uc9c0 \ucd94\ucc9c \uc571 \uad6c\ud604"},"content":{"rendered":"

<\/p>\n

\uc624\ub298 \uc6b0\ub9ac\ub294 React\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc704\uce58 \uae30\ubc18 \uc11c\ube44\uc2a4 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4dc\ub294 \ubc29\ubc95\uc744 \ubc30\uc6b8 \uac83\uc785\ub2c8\ub2e4. \uc774 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc740 \uc0ac\uc6a9\uc790\uc758 \ud604\uc7ac \uc704\uce58\ub97c \uae30\ubc18\uc73c\ub85c \uc8fc\ubcc0 \uad00\uad11\uc9c0\ub97c \ucd94\ucc9c\ud569\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\ub294 \ub300\ud654\ud615 \ud544\ud130\ub97c \ud1b5\ud574 \uad00\uad11\uc9c0\ub97c \uc120\ud0dd\ud560 \uc218 \uc788\uc73c\uba70, \uc774\ub97c \ud1b5\ud574 \uc5ec\ud589 \uacc4\ud68d\uc744 \ubcf4\ub2e4 \ud6a8\uc728\uc801\uc73c\ub85c \uc138\uc6b8 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uae00\uc5d0\uc11c\ub294 \ud504\ub85c\uc81d\ud2b8 \uad6c\uc870, \ud544\uc218 \ub77c\uc774\ube0c\ub7ec\ub9ac, \uc9c0\ub3c4 \ucef4\ud3ec\ub10c\ud2b8 \ubc0f \ud544\ud130 \uae30\ub2a5 \uad6c\ud604\uc5d0 \ub300\ud574 \uc790\uc138\ud788 \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n

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

\uc6b0\uc120, React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc0dd\uc131\ud558\uae30 \uc704\ud574 create-react-app<\/code>\uc744 \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \ucee4\ub9e8\ub4dc \ub77c\uc778\uc5d0\uc11c \uc544\ub798 \uba85\ub839\uc5b4\ub97c \uc785\ub825\ud558\uc2ed\uc2dc\uc624.<\/p>\n

npx create-react-app tourism-app<\/code><\/pre>\n
\uc0dd\uc131\ub41c \ud504\ub85c\uc81d\ud2b8 \ub514\ub809\ud1a0\ub9ac\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4.<\/p>\n
cd tourism-app<\/code><\/pre>\n
\ud544\uc218 \ub77c\uc774\ube0c\ub7ec\ub9ac \uc124\uce58<\/h2>\n
\uc774 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c\ub294 react-google-maps<\/strong>\uc640 axios<\/strong>\ub97c \uc0ac\uc6a9\ud560 \uac83\uc785\ub2c8\ub2e4. react-google-maps<\/code>\ub294 Google Maps API\uc640 \ud1b5\ud569\ud558\uc5ec \uc0b0\ucd9c\ub418\ub294 \ub9f5\uc744 \uc218\uc6d4\ud558\uac8c \uad00\ub9ac\ud560 \uc218 \uc788\uac8c \ud574\uc90d\ub2c8\ub2e4. axios<\/code>\ub294 API \uc694\uccad\uc744 \uac04\ud3b8\ud558\uac8c \ucc98\ub9ac\ud560 \uc218 \uc788\uac8c \ub3c4\uc640\uc90d\ub2c8\ub2e4.<\/p>\n
npm install @react-google-maps\/api axios<\/code><\/pre>\n
\ud504\ub85c\uc81d\ud2b8 \uad6c\uc870<\/h2>\n
\uc774\uc81c \uc804\uccb4\uc801\uc778 \ud504\ub85c\uc81d\ud2b8 \uad6c\uc870\ub97c \uad6c\uc131\ud574\ubd05\uc2dc\ub2e4. \uc544\ub798\uc640 \uac19\uc774 \ub514\ub809\ud130\ub9ac\ub97c \uad6c\uc131\ud569\ub2c8\ub2e4.<\/p>\n
\ntourism-app\/\n\u251c\u2500\u2500 public\/\n\u251c\u2500\u2500 src\/\n\u2502   \u251c\u2500\u2500 components\/\n\u2502   \u2502   \u251c\u2500\u2500 Map.js\n\u2502   \u2502   \u2514\u2500\u2500 Filter.js\n\u2502   \u251c\u2500\u2500 App.js\n\u2502   \u2514\u2500\u2500 index.js\n\u2514\u2500\u2500 package.json\n<\/code><\/pre>\n
\uc9c0\ub3c4 \ucef4\ud3ec\ub10c\ud2b8 \uad6c\ud604<\/h2>\n
\uc774\uc81c Google Maps\ub97c \uc0ac\uc6a9\ud558\ub294 \ub9f5 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9cc\ub4e4\uc5b4 \ubd05\uc2dc\ub2e4. Map.js<\/code> \ud30c\uc77c\uc744 \ub2e4\uc74c\uacfc \uac19\uc774 \uc791\uc131\ud569\ub2c8\ub2e4.<\/p>\n
javascript\nimport React from 'react';\nimport { GoogleMap, LoadScript, Marker } from '@react-google-maps\/api';\n\nconst containerStyle = {\n  width: '100%',\n  height: '400px'\n};\n\nconst center = {\n  lat: -3.745,\n  lng: -38.523\n};\n\nconst MapComponent = ({ locations }) => {\n  return (\n    \n      \n        {locations.map((location, index) => (\n          <\/marker>\n        ))}\n      <\/googlemap>\n    <\/loadscript>\n  );\n}\n\nexport default React.memo(MapComponent);\n<\/code><\/pre>\n
\uc704 \ucf54\ub4dc\uc5d0\uc11c YOUR_API_KEY<\/code>\ub294 Google Cloud Console\uc5d0\uc11c \ubc1c\uae09\ubc1b\uc740 API \ud0a4\ub85c \ubc14\uafd4\uc57c \ud569\ub2c8\ub2e4. \uc774 \ucef4\ud3ec\ub10c\ud2b8\ub294 \uae30\ubcf8\uc801\uc73c\ub85c \uc911\uc2ec \uc88c\ud45c\uc640 \uc90c \ub808\ubca8\uc744 \uc124\uc815\ud558\uba70, \uc804\ub2ec\ubc1b\uc740 \uad00\uad11\uc9c0\uc758 \uc704\uce58\uc5d0 \ub9c8\ucee4\ub97c \ud45c\uc2dc\ud569\ub2c8\ub2e4.<\/p>\n
\ud544\ud130 \ucef4\ud3ec\ub10c\ud2b8 \uad6c\ud604<\/h2>\n
\uc774\uc81c \uc0ac\uc6a9\uc790\uc5d0\uac8c \ud544\ud130\ub97c \uc81c\uacf5\ud560 Filter.js<\/code> \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9cc\ub4e4\uc5b4 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\ub294 \uc120\ud0dd\ud55c \uce74\ud14c\uace0\ub9ac\uc5d0 \ub530\ub77c \uad00\uad11\uc9c0\ub97c \ud544\ud130\ub9c1\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
javascript\nimport React, { useState } from 'react';\n\nconst FilterComponent = ({ categories, onFilterChange }) => {\n  const [selectedCategory, setSelectedCategory] = useState('');\n\n  const handleCategoryChange = (event) => {\n    const category = event.target.value;\n    setSelectedCategory(category);\n    onFilterChange(category);\n  }\n\n  return (\n    
\n      
\uad00\uad11\uc9c0 \ud544\ud130<\/h3>\n      \n