React\ub294 \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4(UI)\ub97c \uad6c\ucd95\ud558\uae30 \uc704\ud55c JavaScript \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4. React\uc758 \uc8fc\uc694 \ud2b9\uc9d5 \uc911 \ud558\ub098\ub294 JSX\ub77c\ub294 \ud2b9\ubcc4\ud55c \ubb38\ubc95\uc744 \uc0ac\uc6a9\ud558\uc5ec UI\ub97c \uc815\uc758\ud55c\ub2e4\ub294 \uac83\uc785\ub2c8\ub2e4. JSX\ub294 JavaScript\uc640 HTML\uc744 \uacb0\ud569\ud560 \uc218 \uc788\ub294 \ubb38\ubc95\uc73c\ub85c, React \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc120\uc5b8\ud560 \ub54c \ub9e4\uc6b0 \uc9c1\uad00\uc801\uc774\uace0 \uac00\ub3c5\uc131\uc774 \ub6f0\uc5b4\ub09c \ucf54\ub4dc\ub97c \uc791\uc131\ud560 \uc218 \uc788\ub3c4\ub85d \ub3c4\uc640\uc90d\ub2c8\ub2e4.<\/p>\n
JSX(JavaScript XML)\ub294 JavaScript\uc758 \ud655\uc7a5 \ubb38\ubc95\uc73c\ub85c, HTML \uc694\uc18c\ub97c JavaScript \ucf54\ub4dc\uc5d0\uc11c \uc9c1\uc811 \uc815\uc758\ud560 \uc218 \uc788\uac8c \ud574\uc90d\ub2c8\ub2e4. JSX\ub97c \uc0ac\uc6a9\ud558\uba74 React \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc815\uc758\ud558\uae30\uac00 \ub354 \uc26c\uc6cc\uc9c0\uba70, \ucf54\ub4dc\uc758 \uac00\ub3c5\uc131 \ub610\ud55c \ud06c\uac8c \ud5a5\uc0c1\ub429\ub2c8\ub2e4. JSX\ub294 JavaScript \ucf54\ub4dc \ub0b4\ubd80\uc5d0 XML\uacfc \uc720\uc0ac\ud55c \uad6c\ubb38\uc744 \ud5c8\uc6a9\ud558\uc5ec, HTML\uacfc \ube44\uc2b7\ud55c \ubc29\uc2dd\uc73c\ub85c UI\ub97c \uad6c\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
JSX\uc758 \uae30\ubcf8 \ubb38\ubc95\uc740 HTML\uacfc \ub9e4\uc6b0 \uc720\uc0ac\ud558\uc9c0\ub9cc \uba87 \uac00\uc9c0 \uaddc\uce59\uc774 \uc788\uc2b5\ub2c8\ub2e4. \uc5ec\uae30\uc11c\ub294 JSX\uc758 \uae30\ubcf8 \uc0ac\uc6a9\ubc95\uc5d0 \ub300\ud574 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
\ub2e4\uc74c\uc740 JSX\ub97c \uc0ac\uc6a9\ud558\uc5ec React \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc815\uc758\ud558\ub294 \uac04\ub2e8\ud55c \uc608\uc81c\uc785\ub2c8\ub2e4.<\/p>\n
\n import React from 'react';\n\n function Greeting() {\n return (\n <div>\n <h1>\uc548\ub155\ud558\uc138\uc694, JSX \uc138\uacc4\uc5d0 \uc624\uc2e0 \uac83\uc744 \ud658\uc601\ud569\ub2c8\ub2e4!<\/h1>\n <p className=\"description\">\uc774\uac83\uc740 JSX\uc758 \uae30\ubcf8 \uc608\uc81c\uc785\ub2c8\ub2e4.<\/p>\n <\/div>\n );\n }\n\n export default Greeting;\n <\/code><\/pre>\n\uc704\uc758 \uc608\uc81c\uc5d0\uc11c <div>, <h1>, <p> \ud0dc\uadf8\ub294 \ubaa8\ub450 JSX\ub85c \uc791\uc131\ub41c HTML \uc694\uc18c\uc785\ub2c8\ub2e4. \ub610\ud55c, class \uc18d\uc131 \ub300\uc2e0 className \uc18d\uc131\uc744 \uc0ac\uc6a9\ud568\uc5d0 \uc720\uc758\ud558\uc138\uc694.<\/p>\n
2. JSX\uc758 \ud2b9\uc9d5<\/h2>\n
JSX\uc758 \uc8fc\uc694 \ud2b9\uc9d5\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\n- \ub9ac\uc561\ud2f0\ube0c \ub80c\ub354\ub9c1:<\/strong> JSX\ub294 \uc0c1\ud0dc(state)\uc640 \uc18d\uc131(props)\uc5d0 \ub530\ub77c \ub3d9\uc801\uc73c\ub85c UI\ub97c \uc5c5\ub370\uc774\ud2b8\ud569\ub2c8\ub2e4. React\uac00 \uc0c1\ud0dc\uac00 \ubcc0\uacbd\ub418\uba74 \uc5b4\ub5a4 \ubd80\ubd84\uc744 \uc5c5\ub370\uc774\ud2b8\ud560\uc9c0 \ud6a8\uc728\uc801\uc73c\ub85c \ud310\ub2e8\ud569\ub2c8\ub2e4.<\/li>\n
- \ud558\ub098\uc758 \ubd80\ubaa8 \uc694\uc18c:<\/strong> JSX \ud45c\ud604\uc2dd\uc740 \ubc18\ub4dc\uc2dc \ud558\ub098\uc758 \ubd80\ubaa8 \uc694\uc18c\ub85c \uac10\uc2f8\uc838\uc57c \ud569\ub2c8\ub2e4. \uc5ec\ub7ec \uc694\uc18c\ub97c \ubc18\ud658\ud560 \uacbd\uc6b0, \ubc18\ub4dc\uc2dc \ud558\ub098\uc758 \ucd5c\uc0c1\uc704 \uc694\uc18c\ub85c \ub798\ud551\ud574\uc57c \ud569\ub2c8\ub2e4.<\/li>\n
- \uc8fc\uc11d:<\/strong> JSX \uc8fc\uc11d\uc740 \uc911\uad04\ud638\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc791\uc131\ud569\ub2c8\ub2e4. HTML \uc8fc\uc11d\uacfc \ub2e4\ub974\uac8c,
{\/* \uc8fc\uc11d \ub0b4\uc6a9 *\/}<\/code> \ud615\uc2dd\uc73c\ub85c \uc791\uc131\ub429\ub2c8\ub2e4.<\/li>\n- HTML\uc774 \uc544\ub2cc XML:<\/strong> JSX\ub294 HTML\uc774 \uc544\ub2cc XML\uc758 \uc57d\uac04 \ubcc0\ud615\ub41c \ud615\ud0dc\ub85c, \ube0c\ub77c\uc6b0\uc800\uac00 \uc774\ub97c \uc778\uc2dd\ud560 \uc218 \uc5c6\uae30 \ub54c\ubb38\uc5d0 Babel\uacfc \uac19\uc740 \ubcc0\ud658 \ub3c4\uad6c\ub97c \ud1b5\ud574 JavaScript\ub85c \ubcc0\ud658\ud574\uc57c \ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n
2.1 JSX \uc8fc\uc11d \ucc98\ub9ac \uc608\uc81c<\/h3>\n\n import React from 'react';\n\n function CommentedComponent() {\n return (\n <div>\n {\/* \uc774 \ubd80\ubd84\uc740 \uc8fc\uc11d \ucc98\ub9ac\ub41c \ud14d\uc2a4\ud2b8\uc785\ub2c8\ub2e4 *\/}\n <p>\uc8fc\uc11d\uc774 \uc788\ub294 \uc608\uc81c\uc785\ub2c8\ub2e4.<\/p>\n <\/div>\n );\n }\n <\/code><\/pre>\n3. JSX\ub97c \ud1b5\ud55c UI \uad6c\uc131<\/h2>\n
React\uc5d0\uc11c JSX\ub97c \uc0ac\uc6a9\ud558\uc5ec UI\ub97c \uad6c\uc131\ud558\ub294 \ubc29\ubc95\uc744 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc5ec\ub7ec \uac1c\uc758 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc870\ud569\ud558\uc5ec \ubcf5\uc7a1\ud55c UI\ub97c \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\n import React from 'react';\n\n function Header() {\n return <h1>\ub098\uc758 \uc6f9\uc0ac\uc774\ud2b8<\/h1>;\n }\n\n function Footer() {\n return <p>\uc800\uc791\uad8c \u00a9 2023<\/p>;\n }\n\n function App() {\n return (\n <div>\n <Header \/>\n <p>\uc5ec\uae30\uc5d0 \ub0b4\uc6a9\uc744 \ucd94\uac00\ud558\uc138\uc694.<\/p>\n <Footer \/>\n <\/div>\n );\n }\n\n export default App;\n <\/code><\/pre>\n\uc704\uc758 \uc608\uc81c\uc5d0\uc11c\ub294 Header<\/code>\uc640 Footer<\/code> \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc815\uc758\ud558\uace0, App<\/code> \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uc774\ub4e4\uc744 \uc870\ud569\ud558\uc5ec \ud398\uc774\uc9c0\ub97c \uad6c\uc131\ud588\uc2b5\ub2c8\ub2e4.<\/p>\n4. JSX\uc758 \ubcc0\ud658<\/h2>\n
JSX\ub294 \ube0c\ub77c\uc6b0\uc800\uac00 \uc774\ud574\ud560 \uc218 \uc788\ub294 JavaScript \ucf54\ub4dc\ub85c \ubcc0\ud658\ub418\uc5b4\uc57c \ud569\ub2c8\ub2e4. \uc77c\ubc18\uc801\uc73c\ub85c Babel\uc744 \uc0ac\uc6a9\ud558\uc5ec JSX\ub97c \ubcc0\ud658\ud569\ub2c8\ub2e4. Babel\uc740 \ucd5c\uc2e0 JavaScript \ubb38\ubc95\uacfc JSX\ub97c \uc77c\ubc18 JavaScript\ub85c \ubcc0\ud658\ud558\ub294 \ub3c4\uad6c\uc785\ub2c8\ub2e4.<\/p>\n
\uc608\ub97c \ub4e4\uc5b4, \ub2e4\uc74c\uacfc \uac19\uc740 JSX \ucf54\ub4dc\ub97c Babel\uc774 \ubcc0\ud658\ud55c \uacb0\uacfc\ub97c \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
\n \/\/ JSX \ucf54\ub4dc\n const element = <h1>\uc548\ub155\ud558\uc138\uc694, React!<\/h1>;\n\n \/\/ Babel\uc5d0 \uc758\ud574 \ubcc0\ud658\ub41c JavaScript \ucf54\ub4dc\n const element = React.createElement('h1', null, '\uc548\ub155\ud558\uc138\uc694, React!');\n <\/code><\/pre>\n5. JSX\uc758 \uacb0\ub860<\/h2>\n
JSX\ub294 React\uc5d0\uc11c UI\ub97c \uad6c\uc131\ud558\ub294 \uac15\ub825\ud558\uace0 \uc9c1\uad00\uc801\uc778 \ubc29\ubc95\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. JavaScript\uc640 HTML\uc758 \uacbd\uacc4\ub97c \ud5c8\ubb3c\uba70, \uac00\ub3c5\uc131\uc774 \ub6f0\uc5b4\ub09c \ucf54\ub4dc\ub97c \uc791\uc131\ud560 \uc218 \uc788\uac8c \ud574\uc90d\ub2c8\ub2e4. JSX\uc758 \ubb38\ubc95\uc744 \uc774\ud574\ud558\uace0 \uc801\uc808\ud558\uac8c \ud65c\uc6a9\ud568\uc73c\ub85c\uc368 \ub354 \ub098\uc740 React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc791\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
React\ub97c \ubc30\uc6b0\ub294 \uacfc\uc815\uc5d0\uc11c JSX\ub294 \ud544\uc218\uc801\uc778 \ubd80\ubd84\uc774\uba70, \uc774\ub97c \uc798 \uc774\ud574\ud558\uace0 \ud65c\uc6a9\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4. \ubcf8 \uae00\uc5d0\uc11c \ub2e4\ub8ec JSX\uc758 \ud2b9\uc9d5\uacfc \ubb38\ubc95\uc744 \ubc14\ud0d5\uc73c\ub85c \uac1c\ubcc4\uc801\uc778 UI \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc791\uc131\ud574\ubcf4\uc138\uc694. \uc2e4\uc81c \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c \uacbd\ud5d8\uc744 \uc313\ub2e4 \ubcf4\uba74, JSX\uc5d0 \ub300\ud55c \uc774\ud574\ub3c4\uac00 \ub354\uc6b1 \ub192\uc544\uc9c8 \uac83\uc785\ub2c8\ub2e4. \ub9ac\uc561\ud2b8\uc758 \ub9e4\ub825\uc744 \ub290\ub07c\uba74\uc11c \uc990\uac70\uc6b4 \uac1c\ubc1c \uc2dc\uac04\uc774 \ub418\uc2dc\uae38 \ubc14\ub78d\ub2c8\ub2e4!<\/p>\n
<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"