{"id":25968,"date":"2024-10-27T06:48:47","date_gmt":"2024-10-27T06:48:47","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=25968"},"modified":"2024-11-26T07:48:29","modified_gmt":"2024-11-26T07:48:29","slug":"%eb%a6%ac%ec%95%a1%ed%8a%b8-%ea%b0%95%ec%a2%8c-%ec%9d%bc%ea%b8%b0%ec%9e%a5-%ec%95%b1%ec%9d%98-%eb%b2%84%ed%8a%bc-%eb%b0%8f-%ed%97%a4%eb%8d%94-%ec%bb%b4%ed%8f%ac%eb%84%8c%ed%8a%b8-%ea%b5%ac%ed%98%84","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/25968\/","title":{"rendered":"\ub9ac\uc561\ud2b8 \uac15\uc88c: \uc77c\uae30\uc7a5 \uc571\uc758 \ubc84\ud2bc \ubc0f \ud5e4\ub354 \ucef4\ud3ec\ub10c\ud2b8 \uad6c\ud604\ud558\uae30"},"content":{"rendered":"

<\/p>\n

\n \ubcf8 \uac15\uc88c\uc5d0\uc11c\ub294 \ub9ac\uc561\ud2b8\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc77c\uae30\uc7a5 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uacf5\ud1b5 \ucef4\ud3ec\ub10c\ud2b8\uc778
\n Button<\/strong>\uacfc Header<\/strong>\ub97c \uad6c\ud604\ud558\ub294 \ubc29\ubc95\uc744 \ub2e8\uacc4\ubcc4\ub85c \uc124\uba85\ud569\ub2c8\ub2e4.
\n \uc77c\uae30\uc7a5 \uc571\uc740 \uc0ac\uc6a9\uc790\ub85c \ud558\uc5ec\uae08 \uc790\uc2e0\uc758 \uc77c\uae30\ub97c \uc791\uc131\ud558\uace0 \uc800\uc7a5\ud560 \uc218 \uc788\ub3c4\ub85d \ud574\uc8fc\ub294 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc73c\ub85c,
\n \uae30\ubcf8\uc801\uc778 UI \ucef4\ud3ec\ub10c\ud2b8\ub97c \uce5c\uc219\ud558\uac8c \ub9cc\ub4e4\uae30 \uc704\ud574 \ub9ac\uc561\ud2b8\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \uc88b\uc2b5\ub2c8\ub2e4.\n <\/p>\n

\ub9ac\uc561\ud2b8\ub780?<\/h2>\n

\n \ub9ac\uc561\ud2b8(React)\ub294 \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uad6c\ucd95\ud558\uae30 \uc704\ud55c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4.
\n \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 UI\ub97c \uad6c\ucd95\ud560 \ub54c \ucef4\ud3ec\ub10c\ud2b8 \uae30\ubc18\uc758 \uad6c\uc870\ub97c \ud1b5\ud574 \uc7ac\uc0ac\uc6a9\uc131\uacfc \ud6a8\uc728\uc131\uc744 \uadf9\ub300\ud654\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
\n \ub9ac\uc561\ud2b8\ub294 \uc0c1\ud0dc(state)\uc640 \uc18d\uc131(props)\uc744 \uc0ac\uc6a9\ud558\uc5ec \ub3d9\uc801\uc778 UI\ub97c \uc27d\uac8c \uad00\ub9ac\ud558\uace0 \uc5c5\ub370\uc774\ud2b8\ud560 \uc218 \uc788\ub3c4\ub85d \ud574\uc90d\ub2c8\ub2e4.\n <\/p>\n

\uacf5\ud1b5 \ucef4\ud3ec\ub10c\ud2b8\ub780?<\/h2>\n

\n \uacf5\ud1b5 \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc5ec\ub7ec \uacf3\uc5d0\uc11c \uc7ac\uc0ac\uc6a9\ub420 \uc218 \uc788\ub294 UI \uc694\uc18c\ub97c \uc758\ubbf8\ud569\ub2c8\ub2e4.
\n \uc77c\uae30\uc7a5 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c\ub294 Button<\/code>\uacfc Header<\/code> \uac19\uc740 \uc694\uc18c\ub4e4\uc774 \uc790\uc8fc \uc0ac\uc6a9\ub420 \uac83\uc774\ubbc0\ub85c,
\n \uc774\ub97c \ucef4\ud3ec\ub10c\ud2b8\ub85c \ubd84\ub9ac\ud558\uc5ec \ucf54\ub4dc\uc758 \uc911\ubcf5\uc744 \uc904\uc774\uace0 \uc720\uc9c0\ubcf4\uc218\ub97c \uc6a9\uc774\ud558\uac8c \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n <\/p>\n

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

\n \ud504\ub85c\uc81d\ud2b8\ub97c \uc2dc\uc791\ud558\uae30 \uc804\uc5d0 \uba3c\uc800 \ub9ac\uc561\ud2b8 \ud658\uacbd\uc744 \uc124\uc815\ud574\uc57c \ud569\ub2c8\ub2e4.
\n \uc0c8\ub85c\uc6b4 \ub9ac\uc561\ud2b8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc2dc\uc791\ud558\uae30 \uc704\ud574 \ub2e4\uc74c\uc758 \uba85\ub839\uc5b4\ub97c \uc785\ub825\ud558\uc5ec \ub9ac\uc561\ud2b8 \uc571\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4:\n <\/p>\n

npx create-react-app diary-app<\/code><\/pre>\n
\n        \uc774\ud6c4 \uc0dd\uc131\ub41c \ub514\ub809\ud1a0\ub9ac\ub85c \uc774\ub3d9\ud558\uc5ec \ud504\ub85c\uc81d\ud2b8\ub97c \uc2e4\ud589\ud569\ub2c8\ub2e4:\n    <\/p>\n
cd diary-app\nnpm start<\/code><\/pre>\n
\uacf5\ud1b5 \ucef4\ud3ec\ub10c\ud2b8 \uad6c\ud604\ud558\uae30<\/h2>\n
1. Button \ucef4\ud3ec\ub10c\ud2b8<\/h3>\n
\nButton<\/code> \ucef4\ud3ec\ub10c\ud2b8\ub294 \ud074\ub9ad \uac00\ub2a5\ud55c \ubc84\ud2bc\uc744 \uc0dd\uc131\ud558\ub294 \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4.
\n        \uc774 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ud1b5\ud574 \ub2e4\uc591\ud55c \ubc84\ud2bc \uc2a4\ud0c0\uc77c\uacfc \uae30\ub2a5\uc744 \uc27d\uac8c \ucd94\uac00\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
\n        \uc544\ub798 \ucf54\ub4dc\ub97c \ud1b5\ud574 Button<\/code> \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0dd\uc131\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.\n    <\/p>\n
\nimport React from 'react';\nimport '.\/Button.css'; \/\/ \uc2a4\ud0c0\uc77c\uc744 \uc704\ud55c CSS \ud30c\uc77c\n\nconst Button = ({ onClick, children, className }) => {\n    return (\n