\ub9ac\uc561\ud2b8\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c, UI\ub97c \uad6c\ucd95\ud558\uae30 \uc704\ud574 \uc124\uacc4\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \ub9ac\uc561\ud2b8\uc758 \uc0c1\ud0dc(state)\uc640 \uc18d\uc131(props)\uc740 \uc885\uc885 \ub370\uc774\ud130\ub97c \ub2e4\ub8e8\uae30 \uc704\ud55c \ud615 \ubcc0\ud658\uc744 \ud544\uc694\ub85c \ud569\ub2c8\ub2e4. \uc774 \uac15\uc88c\uc5d0\uc11c\ub294 \ud615 \ubcc0\ud658\uc758 \uac1c\ub150\uacfc \uc774\ub97c \ub9ac\uc561\ud2b8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ub0b4\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc790\uc138\ud788 \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
\ud615 \ubcc0\ud658(Type Conversion)\uc740 \ub370\uc774\ud130\uc758 \ud615\uc744 \ub2e4\ub978 \ud615\uc73c\ub85c \ubcc0\ud658\ud558\ub294 \uacfc\uc815\uc744 \uc758\ubbf8\ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \ubb38\uc790\uc5f4(string)\uc744 \uc22b\uc790(number)\ub85c \ub610\ub294 \uadf8 \ubc18\ub300\ub85c \ubcc0\ud658\ud558\ub294 \uac83\uc774 \ud615 \ubcc0\ud658\uc758 \uc77c\ubc18\uc801\uc778 \uc608\uc785\ub2c8\ub2e4. \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0\uc11c\ub294 \uc790\ub3d9 \ud615 \ubcc0\ud658\uacfc \uba85\uc2dc\uc801 \ud615 \ubcc0\ud658 \ub450 \uac00\uc9c0 \ubc29\ubc95\uc774 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub294 \ud544\uc694\uc5d0 \ub530\ub77c \uc790\ub3d9\uc73c\ub85c \ud615 \ubcc0\ud658\uc744 \uc218\ud589\ud569\ub2c8\ub2e4. \uc774\ub294 \ub3d9\uc801 \ud0c0\uc785 \uc5b8\uc5b4\uc778 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \ud2b9\uc131 \uc911 \ud558\ub098\uc785\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4:<\/p>\n
\n\nconst num = 5;\nconst str = \"10\";\nconst result = num + str; \/\/ \uacb0\uacfc\ub294 \"510\"\n<\/code>\n<\/pre>\n\uc704\uc758 \ucf54\ub4dc\uc5d0\uc11c \uc22b\uc790 5\uc640 \ubb38\uc790\uc5f4 “10”\uc744 \ub354\ud558\uba74, \uc22b\uc790 5\uac00 \uc790\ub3d9\uc73c\ub85c \ubb38\uc790\uc5f4\ub85c \ubcc0\ud658\ub418\uc5b4 “510”\uc774\ub77c\ub294 \ubb38\uc790\uc5f4 \uacb0\uacfc\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/p>\n
\uba85\uc2dc\uc801 \ud615 \ubcc0\ud658<\/h3>\n
\uba85\uc2dc\uc801 \ud615 \ubcc0\ud658\uc740 \uac1c\ubc1c\uc790\uac00 \uc9c1\uc811 \ud615 \ubcc0\ud658\uc744 \uc218\ud589\ud558\ub294 \uac83\uc744 \uc758\ubbf8\ud569\ub2c8\ub2e4. \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0\uc11c\ub294 \uc5ec\ub7ec \ud615 \ubcc0\ud658 \ud568\uc218\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4:<\/p>\n
\nNumber(value)<\/code>: \ubb38\uc790\uc5f4\uc774\ub098 \ubd88\ub9ac\uc5b8\uc744 \uc22b\uc790\ub85c \ubcc0\ud658\ud569\ub2c8\ub2e4.<\/li>\nString(value)<\/code>: \uc22b\uc790\ub098 \ubd88\ub9ac\uc5b8\uc744 \ubb38\uc790\uc5f4\ub85c \ubcc0\ud658\ud569\ub2c8\ub2e4.<\/li>\nBoolean(value)<\/code>: \uac12\uc758 \uc9c4\ub9ac\uac12\uc744 Boolean\uc73c\ub85c \ubcc0\ud658\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n\ub9ac\uc561\ud2b8\uc5d0\uc11c\uc758 \ud615 \ubcc0\ud658<\/h2>\n
\ub9ac\uc561\ud2b8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \ud615 \ubcc0\ud658\uc740 \ub9e4\uc6b0 \uc911\uc694\ud55c \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\uac00 \uc785\ub825\ud55c \ub370\uc774\ud130\ub97c \ucc98\ub9ac\ud560 \ub54c \uc8fc\ub85c \ud615 \ubcc0\ud658\uc774 \ud544\uc694\ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \uc0ac\uc6a9\uc790\uac00 \uc785\ub825\ud55c \uc22b\uc790\ub97c \ucc98\ub9ac\ud558\uac70\ub098 API\uc5d0\uc11c \ubc1b\uc740 \ub370\uc774\ud130\ub97c \uc801\uc808\ud55c \ud615\uc73c\ub85c \ubcc0\ud658\ud558\ub294 \ub4f1\uc758 \uc791\uc5c5\uc774 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\ud3fc \ub370\uc774\ud130 \ucc98\ub9ac<\/h3>\n
\ub9ac\uc561\ud2b8\uc5d0\uc11c\ub294 \ud3fc \ub370\uc774\ud130 \ucc98\ub9ac \uc911 \uc804\ub2ec\ub41c \uac12\uc758 \ud615\uc744 \uc815\ud655\ud788 \uc774\ud574\ud558\uace0 \ubcc0\ud658\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \uc785\ub825 \ud544\ub4dc\ub97c \ub9cc\ub4e4\uc5b4 \uc0ac\uc6a9\uc790\ub85c\ubd80\ud130 \uc22b\uc790\ub97c \uc785\ub825\ubc1b\ub294 \uacbd\uc6b0, \uc785\ub825\uac12\uc740 \ud56d\uc0c1 \ubb38\uc790\uc5f4\ub85c \uc804\ub2ec\ub429\ub2c8\ub2e4. \uc774 \uacbd\uc6b0, \ud574\ub2f9 \uac12\uc744 \uc22b\uc790\ub85c \ubcc0\ud658\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n
\n\nimport React, { useState } from 'react';\n\nfunction NumberInput() {\n const [number, setNumber] = useState(0);\n\n const handleChange = (event) => {\n setNumber(Number(event.target.value)); \/\/ \ubb38\uc790\uc5f4\uc744 \uc22b\uc790\ub85c \ubcc0\ud658\n };\n\n return (\n \n \n \uc785\ub825\ud55c \uc22b\uc790: {number}<\/p>\n <\/div>\n );\n}\n<\/code>\n<\/pre>\n
\uc704 \ucf54\ub4dc\uc5d0\uc11c\ub294 \uc0ac\uc6a9\uc790\uac00 \uc785\ub825\ud55c \uac12\uc744 Number()<\/code> \ud568\uc218\ub97c \uc0ac\uc6a9\ud574 \uc22b\uc790\ub85c \ubcc0\ud658\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\nAPI \ub370\uc774\ud130 \ucc98\ub9ac<\/h3>\n
\ub9ac\uc561\ud2b8\uc5d0\uc11c \uc678\ubd80 API\ub85c\ubd80\ud130 \ub370\uc774\ud130 \uc694\uccad\uc744 \ud560 \ub54c, \uc751\ub2f5 \ub370\uc774\ud130\uc758 \ud615\uc744 \ucc98\ub9ac\ud558\ub294 \uac83\ub3c4 \uc911\uc694\ud569\ub2c8\ub2e4. \uc77c\ubc18\uc801\uc73c\ub85c API \uc751\ub2f5\uc740 JSON \ud615\uc2dd\uc73c\ub85c \uc624\uba70, \uc774 \ub370\uc774\ud130\ub97c \uc801\uc808\ud55c \ud615\ud0dc\ub85c \ubcc0\ud658\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n
\n\nimport React, { useEffect, useState } from 'react';\n\nfunction ApiData() {\n const [data, setData] = useState([]);\n\n useEffect(() => {\n fetch('https:\/\/api.example.com\/data')\n .then(response => response.json())\n .then(jsonData => {\n const processedData = jsonData.map(item => (\n {\n id: Number(item.id), \/\/ id\ub97c \uc22b\uc790\ub85c \ubcc0\ud658\n name: String(item.name) \/\/ name\uc744 \ubb38\uc790\uc5f4\ub85c \ubcc0\ud658\n }\n ));\n setData(processedData);\n });\n }, []);\n\n return (\n \n {data.map(item => (\n - {item.name}<\/li>\n ))}\n <\/ul>\n );\n}\n<\/code>\n<\/pre>\n
\uc704 \ucf54\ub4dc\uc5d0\uc11c\ub294 API\ub85c\ubd80\ud130 \ubc1b\uc544\uc628 \ub370\uc774\ud130\uc5d0\uc11c id<\/code>\ub294 \uc22b\uc790\ub85c, name<\/code>\uc740 \ubb38\uc790\uc5f4\ub85c \ubcc0\ud658\ud558\uc5ec \uc0ac\uc6a9\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\ud615 \ubcc0\ud658\uc758 \uc8fc\uc758\uc0ac\ud56d<\/h2>\n
\ud615 \ubcc0\ud658\uc744 \uc0ac\uc6a9\ud560 \ub54c \uba87 \uac00\uc9c0 \uc8fc\uc758\ud560 \uc810\uc774 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n
\n- NaN<\/strong>: \uc22b\uc790\ub85c \ubcc0\ud658\ud560 \uc218 \uc5c6\ub294 \ubb38\uc790\uc5f4\uc740
NaN<\/code>\uc744 \ubc18\ud658\ud569\ub2c8\ub2e4. \uc608: Number('text')<\/code>\ub294 NaN<\/code>\uc774 \ub429\ub2c8\ub2e4.<\/li>\n- \uc720\ud6a8\uc131 \uac80\uc0ac<\/strong>: \ub370\uc774\ud130 \ud615 \ubcc0\ud658 \uc804 \uc785\ub825\uac12\uc758 \uc720\ud6a8\uc131\uc744 \uac80\uc0ac\ud574\uc57c \ud569\ub2c8\ub2e4. \uc62c\ubc14\ub974\uc9c0 \uc54a\uc740 \ud615 \ubcc0\ud658\uc774 \uc77c\uc5b4\ub098\uc9c0 \uc54a\ub3c4\ub85d \uc8fc\uc758\ud574\uc57c \ud569\ub2c8\ub2e4.<\/li>\n
- \uc758\ub3c4\uce58 \uc54a\uc740 \uacb0\uacfc<\/strong>: \uc790\ub3d9 \ud615 \ubcc0\ud658\uc5d0 \uc758\ud574 \ubc1c\uc0dd\ud560 \uc218 \uc788\ub294 \uc758\ub3c4\uce58 \uc54a\uc740 \uacb0\uacfc\uc5d0 \uc8fc\uc758\ud574\uc57c \ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4,
0 == '0'<\/code>\uc740 true\ub97c \ubc18\ud658\ud558\uc9c0\ub9cc, 0 === '0'<\/code>\uc740 false\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n\uacb0\ub860<\/h2>\n
\ub9ac\uc561\ud2b8\uc5d0\uc11c \ud615 \ubcc0\ud658\uc740 \ub370\uc774\ud130\ub97c \ud45c\ud604\ud558\uace0 \ucc98\ub9ac\ud558\ub294 \ub370 \ud544\uc218\uc801\uc785\ub2c8\ub2e4. \ub2e4\uc591\ud55c \ubc29\ubc95\uc73c\ub85c \ud615 \ubcc0\ud658\uc744 \uc0ac\uc6a9\ud558\ub294 \ubc29\ubc95\uc744 \ubc30\uc6e0\uace0, \uc774\ub97c \ud1b5\ud574 \uc785\ub825 \ud3fc \ubc0f API \ub370\uc774\ud130 \ucc98\ub9ac\uc5d0\uc11c \ubc1c\uc0dd\ud560 \uc218 \uc788\ub294 \uc624\ub958\ub97c \uc608\ubc29\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uac15\uc88c\ub97c \ud1b5\ud574 \ub9ac\uc561\ud2b8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ub0b4\uc5d0\uc11c \ud615 \ubcc0\ud658\uc744 \ud6a8\uacfc\uc801\uc73c\ub85c \uc0ac\uc6a9\ud558\ub294 \ubc29\ubc95\uc744 \uc775\ud790 \uc218 \uc788\uae30\ub97c \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n
<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"