\ud604\ub300 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c\ub294 \ub370\uc774\ud130 \uc2dc\uac01\ud654\uac00 \ub9e4\uc6b0 \uc911\uc694\ud55c \uc694\uc18c\ub85c \uc790\ub9ac \uc7a1\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\ub294 \ubcf5\uc7a1\ud55c \ub370\uc774\ud130\ub97c \uc9c1\uad00\uc801\uc73c\ub85c \uc811\uadfc\ud558\uace0 \ud574\uc11d\ud560 \uc218 \uc788\uc5b4\uc57c \ud558\uae30 \ub54c\ubb38\uc5d0, \ub2e4\uc591\ud55c \ucc28\ud2b8\uc640 \uadf8\ub798\ud504\ub97c \ud1b5\ud574 \uc815\ubcf4\uac00 \uc81c\uacf5\ub418\uc5b4\uc57c \ud569\ub2c8\ub2e4. \uc774 \uae00\uc5d0\uc11c\ub294 React\uc5d0\uc11c \uc678\ubd80 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc5f0\ub3d9\ud558\uc5ec \ub300\ud654\ud615 \uadf8\ub798\ud504 \ubc0f \ucc28\ud2b8\ub97c \uad6c\ud604\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc790\uc138\ud788 \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
React\ub294 Facebook\uc5d0\uc11c \uac1c\ubc1c\ud55c \uc624\ud508 \uc18c\uc2a4 JavaScript \ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c, \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uad6c\uc131\ud558\ub294 \ub370 \uc0ac\uc6a9\ub429\ub2c8\ub2e4. React\uc758 \uac00\uc7a5 \ud070 \uc7a5\uc810 \uc911 \ud558\ub098\ub294 \ucef4\ud3ec\ub10c\ud2b8 \uae30\ubc18 \uad6c\uc870\ub85c, \uc7ac\uc0ac\uc6a9 \uac00\ub2a5\ud55c UI \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9cc\ub4e4\uace0 \uad00\ub9ac\ud558\ub294 \ub370 \uc6a9\uc774\ud558\ub2e4\ub294 \uac83\uc785\ub2c8\ub2e4. \ub610\ud55c, \uac00\uc0c1 DOM\uc744 \ud65c\uc6a9\ud558\uc5ec \ud6a8\uc728\uc801\uc73c\ub85c UI\ub97c \uc5c5\ub370\uc774\ud2b8\ud558\ub294 \ubc29\uc2dd \ub355\ubd84\uc5d0 \uc131\ub2a5 \ub610\ud55c \ub6f0\uc5b4\ub0a9\ub2c8\ub2e4.<\/p>\n
React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \uc5ec\ub7ec \ucc28\ud2b8 \ub77c\uc774\ube0c\ub7ec\ub9ac\uac00 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\uc911\uc5d0\uc11c \uc778\uae30 \uc788\ub294 \uba87 \uac00\uc9c0\ub97c \uc18c\uac1c\ud569\ub2c8\ub2e4:<\/p>\n
\uba3c\uc800 \uc0c8\ub85c\uc6b4 React \ud504\ub85c\uc81d\ud2b8\ub97c \uc124\uc815\ud558\uaca0\uc2b5\ub2c8\ub2e4. Create React App\uc744 \uc0ac\uc6a9\ud558\uc5ec \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud130\ubbf8\ub110\uc5d0\uc11c \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc2e4\ud589\ud569\ub2c8\ub2e4.<\/p>\n
npx create-react-app my-chart-app<\/code><\/pre>\n\uc774\ud6c4 \ud504\ub85c\uc81d\ud2b8 \ub514\ub809\ud1a0\ub9ac\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4.<\/p>\n
cd my-chart-app<\/code><\/pre>\n\uc774\uc81c \ucc28\ud2b8\ub97c \uadf8\ub9b4 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc124\uce58\ud574\uc57c \ud569\ub2c8\ub2e4. \uc5ec\uae30\uc11c\ub294 Chart.js\uc640 react-chartjs-2\ub97c \uc0ac\uc6a9\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
npm install chart.js react-chartjs-2<\/code><\/pre>\n4. \ub370\uc774\ud130 \uc900\ube44<\/h2>\n
\uc774\uc81c \uc608\uc2dc \ub370\uc774\ud130\ub97c \uc0dd\uc131\ud558\uc5ec \ucc28\ud2b8\uc5d0 \uc0ac\uc6a9\ud560 \uc900\ube44\ub97c \ud558\uaca0\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \ud310\ub9e4 \ub370\uc774\ud130\uc640 \uad00\ub828\ub41c \uac04\ub2e8\ud55c \ubc30\uc5f4\uc744 \ub9cc\ub4e4\uc5b4 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
const salesData = {\n labels: ['1\uc6d4', '2\uc6d4', '3\uc6d4', '4\uc6d4', '5\uc6d4', '6\uc6d4'],\n datasets: [\n {\n label: '2023\ub144 \ud310\ub9e4\ub7c9',\n data: [30, 50, 40, 70, 60, 90],\n backgroundColor: 'rgba(75, 192, 192, 0.6)',\n borderColor: 'rgba(75, 192, 192, 1)',\n borderWidth: 2\n }\n ]\n };<\/code><\/pre>\n5. \ucc28\ud2b8 \ucef4\ud3ec\ub10c\ud2b8 \uc0dd\uc131<\/h2>\n
\uc774\uc81c Chart.js\ub97c \uc0ac\uc6a9\ud558\uc5ec \ucc28\ud2b8 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0dd\uc131\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. src\/components \ub514\ub809\ud130\ub9ac\ub97c \ub9cc\ub4e4\uace0 \uadf8 \uc548\uc5d0 SalesChart.js\ub77c\ub294 \ud30c\uc77c\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/p>\n
import React from 'react';\nimport { Bar } from 'react-chartjs-2';\n\nconst SalesChart = ({ data }) => {\n return (\n \n \uc5f0\uac04 \ud310\ub9e4\ub7c9 \ucc28\ud2b8<\/h2>\n <\/bar>\n <\/div>\n );\n};\n\nexport default SalesChart;<\/code><\/pre>\n6. App.js \uc218\uc815<\/h2>\n
\uc774\uc81c App.js \ud30c\uc77c\uc744 \uc218\uc815\ud558\uc5ec SalesChart \ucef4\ud3ec\ub10c\ud2b8\ub97c \ud3ec\ud568\uc2dc\ud0a4\uace0 \uc804\ub2ec\ub41c \ub370\uc774\ud130\ub97c \ud45c\uc2dc\ud560 \uc218 \uc788\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
import React from 'react';\nimport '.\/App.css';\nimport SalesChart from '.\/components\/SalesChart';\n\nconst App = () => {\n const salesData = {\n labels: ['1\uc6d4', '2\uc6d4', '3\uc6d4', '4\uc6d4', '5\uc6d4', '6\uc6d4'],\n datasets: [\n {\n label: '2023\ub144 \ud310\ub9e4\ub7c9',\n data: [30, 50, 40, 70, 60, 90],\n backgroundColor: 'rgba(75, 192, 192, 0.6)',\n borderColor: 'rgba(75, 192, 192, 1)',\n borderWidth: 2\n }\n ]\n };\n\n return (\n \n \ud310\ub9e4 \ubd84\uc11d \ub3c4\uad6c<\/h1>\n <\/saleschart>\n <\/div>\n );\n};\n\nexport default App;<\/code><\/pre>\n7. \uc571 \uc2e4\ud589<\/h2>\n
\ubaa8\ub4e0 \uc124\uc815\uc774 \uc644\ub8cc\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uc774\uc81c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc2e4\ud589\ud558\uc5ec \ub300\ud654\ud615 \uadf8\ub798\ud504\ub97c \ud655\uc778\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc2e4\ud589\ud558\uc2ed\uc2dc\uc624.<\/p>\n
npm start<\/code><\/pre>\n8. \uc5ec\ub7ec \uc720\ud615\uc758 \ucc28\ud2b8 \ucd94\uac00\ud558\uae30<\/h2>\n
\ub2e8\uc21c\ud55c \ubc14 \ucc28\ud2b8\ub97c \ub9cc\ub4e4\uc5c8\uc2b5\ub2c8\ub2e4. \uc774\uc81c \ub2e4\uc591\ud55c \uc720\ud615\uc758 \ucc28\ud2b8\ub97c \ucd94\uac00\ud558\uc5ec \ubcf4\ub2e4 \ud48d\ubd80\ud55c \uc2dc\uac01\uc801 \uc815\ubcf4 \uc81c\uacf5\uc744 \uc704\ud55c \uae30\ub2a5\uc744 \uad6c\ud604\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \uc120 \uadf8\ub798\ud504\uc640 \uc6d0\ud615 \ucc28\ud2b8\uc758 \uc608\uc785\ub2c8\ub2e4.<\/p>\n
8.1 \uc120 \uadf8\ub798\ud504<\/h3>\nconst LineChart = () => {\n const lineData = {\n labels: ['1\uc6d4', '2\uc6d4', '3\uc6d4', '4\uc6d4', '5\uc6d4', '6\uc6d4'],\n datasets: [\n {\n label: '2023\ub144 \ud074\ub9ad \uc218',\n data: [100, 200, 150, 300, 250, 400],\n fill: false,\n backgroundColor: 'rgba(75, 192, 192, 0.6)',\n borderColor: 'rgba(75, 192, 192, 1)',\n },\n ],\n };\n\n return (\n \n \uc5f0\uac04 \ud074\ub9ad \uc218 \ucc28\ud2b8<\/h2>\n <\/line>\n <\/div>\n );\n};<\/code><\/pre>\n8.2 \uc6d0\ud615 \ucc28\ud2b8<\/h3>\nconst PieChart = () => {\n const pieData = {\n labels: ['\ub0a8\uc131', '\uc5ec\uc131', '\uae30\ud0c0'],\n datasets: [\n {\n label: '\uc0ac\uc6a9\uc790 \uc131\ubcc4 \ube44\uc728',\n data: [50, 30, 20],\n backgroundColor: ['rgba(255, 99, 132, 0.6)', 'rgba(54, 162, 235, 0.6)', 'rgba(255, 206, 86, 0.6)'],\n },\n ],\n };\n\n return (\n \n \uc0ac\uc6a9\uc790 \uc131\ubcc4 \ube44\uc728<\/h2>\n <\/pie>\n <\/div>\n );\n};<\/code><\/pre>\n9. \uc885\ud569 \uad6c\uc131<\/h2>\n
\uc774\uc81c \uc5ec\ub7ec \ucc28\ud2b8\ub97c \uc885\ud569\ud558\uc5ec \ub300\ud654\ud615 \ub300\uc2dc\ubcf4\ub4dc\ub97c \ub9cc\ub4e4\uc5b4 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc544\ub798\uc758 \ucf54\ub4dc\ub294 App.js\ub97c \uc218\uc815\ud558\uc5ec \uc120 \uadf8\ub798\ud504\uc640 \uc6d0\ud615 \ucc28\ud2b8\ub97c \ud3ec\ud568\ud558\ub294 \ubc29\ubc95\uc744 \ubcf4\uc5ec\uc90d\ub2c8\ub2e4.<\/p>\n
import React from 'react';\nimport '.\/App.css';\nimport SalesChart from '.\/components\/SalesChart';\nimport LineChart from '.\/components\/LineChart';\nimport PieChart from '.\/components\/PieChart';\n\nconst App = () => {\n return (\n \n \ud310\ub9e4 \ubc0f \uc0ac\uc6a9\uc790 \ubd84\uc11d \ub3c4\uad6c<\/h1>\n <\/saleschart>\n <\/linechart>\n <\/piechart>\n <\/div>\n );\n};\n\nexport default App;<\/code><\/pre>\n10. \uacb0\ub860<\/h2>\n
\uc774\ubc88 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c\ub294 React\uc5d0\uc11c \ucc28\ud2b8 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub300\ud654\ud615 \uadf8\ub798\ud504\uc640 \ucc28\ud2b8\ub97c \uad6c\ud604\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc124\uba85\ud588\uc2b5\ub2c8\ub2e4. Chart.js\uc640 react-chartjs-2\ub97c \ud1b5\ud574 \ub2e4\uc591\ud55c \ucc28\ud2b8\ub97c \ub9cc\ub4e4 \uc218 \uc788\uc5c8\uc73c\uba70, \ub370\uc774\ud130\uc758 \uc2dc\uac01\ud654\ub97c \ud1b5\ud574 \uc0ac\uc6a9\uc790\uac00 \ubcf4\ub2e4 \uc27d\uac8c \uc815\ubcf4\ub97c \ud30c\uc545\ud560 \uc218 \uc788\ub3c4\ub85d \ub3d5\ub294 \ubc29\ubc95\uc744 \ubc30\uc6e0\uc2b5\ub2c8\ub2e4. \uc774\ub7ec\ud55c \uc2dc\uac01\uc801 \ub3c4\uad6c\ub294 \ubd84\uc11d \ub3c4\uad6c\uc758 \uc720\uc6a9\uc131\uc744 \ud06c\uac8c \ub192\uc774\uba70, React\uc758 \ucef4\ud3ec\ub10c\ud2b8 \uae30\ubc18 \uc811\uadfc \ubc29\uc2dd\uc744 \ud1b5\ud574 \uc27d\uac8c \uad00\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\ucd94\uac00\uc801\uc73c\ub85c D3.js\uc640 \uac19\uc740 \ub354 \ubcf5\uc7a1\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub9de\ucda4\ud615 \ub370\uc774\ud130 \uc2dc\uac01\ud654\ub97c \ud655\uc7a5\ud560 \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub7ec\ud55c \ucc28\ud2b8 \ubc0f \uadf8\ub798\ud504\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc5ec\ub7ec\ubd84\uc758 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \ub354 \ub098\uc740 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \uc81c\uacf5\ud574 \ubcf4\uc2dc\uae30 \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n
<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"