{"id":39061,"date":"2024-11-02T02:36:42","date_gmt":"2024-11-02T02:36:42","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=39061"},"modified":"2024-11-26T06:42:32","modified_gmt":"2024-11-26T06:42:32","slug":"%eb%a6%ac%ec%95%a1%ed%8a%b8%ec%97%90%ec%84%9c-%ed%91%9c-%ea%b5%ac%ed%98%84%ed%95%98%ea%b8%b0-%ed%91%9c%ec%97%90-%eb%8d%b0%ec%9d%b4%ed%84%b0-%eb%b0%94%ec%9d%b8%eb%94%a9%ea%b3%bc-%ea%b8%b0%eb%b3%b8","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/39061\/","title":{"rendered":"\ub9ac\uc561\ud2b8\uc5d0\uc11c \ud45c \uad6c\ud604\ud558\uae30, \ud45c\uc5d0 \ub370\uc774\ud130 \ubc14\uc778\ub529\uacfc \uae30\ubcf8 \uc2a4\ud0c0\uc77c\ub9c1"},"content":{"rendered":"

<\/p>\n

\n \ub9ac\uc561\ud2b8\ub294 \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4(UI)\ub97c \uad6c\ucd95\ud558\uae30 \uc704\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c, \ucef4\ud3ec\ub10c\ud2b8 \uae30\ubc18 \uad6c\uc870\ub97c \ud1b5\ud574 \ud6a8\uc728\uc801\uc73c\ub85c \uad00\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uae00\uc5d0\uc11c\ub294 \ub9ac\uc561\ud2b8\uc5d0\uc11c \ud45c\ub97c \uad6c\ud604\ud558\ub294 \ubc29\ubc95\uacfc \ub370\uc774\ud130 \ubc14\uc778\ub529, \uae30\ubcf8 \uc2a4\ud0c0\uc77c\ub9c1\uc5d0 \ub300\ud574 \uc790\uc138\ud788 \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4. \ud45c\ub294 \ub9ce\uc740 \ub370\uc774\ud130\ub97c \uc2dc\uac01\ud654\ud558\ub294 \ub370 \uc720\uc6a9\ud55c \ub3c4\uad6c\ub85c, \uadf8\ub9ac\uace0 \ub9ac\uc561\ud2b8\uc758 \uc7a5\uc810\uc744 \uc0b4\ub824 \ub370\uc774\ud130\ub97c \ub3d9\uc801\uc73c\ub85c \ucc98\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n <\/p>\n

1. \ub9ac\uc561\ud2b8 \ud45c \ucef4\ud3ec\ub10c\ud2b8 \ub9cc\ub4e4\uae30<\/h2>\n

\n \ub9ac\uc561\ud2b8\uc5d0\uc11c \ud45c\ub97c \ub9cc\ub4e4\uae30 \uc704\ud574 \uc6b0\uc120 \ub370\uc774\ud130\ub97c \uc900\ube44\ud574\uc57c \ud569\ub2c8\ub2e4. \uc544\ub798 \uc608\uc81c\uc5d0\uc11c\ub294 \uac04\ub2e8\ud55c \uc0ac\uc6a9\uc790 \ubaa9\ub85d\uc744 \ubcf4\uc5ec\uc8fc\ub294 \ud45c\ub97c \uad6c\ud604\ud560 \uac83\uc785\ub2c8\ub2e4.\n <\/p>\n

1.1. \ub370\uc774\ud130 \uc900\ube44<\/h3>\n

\n \ud45c\uc5d0 \ud45c\uc2dc\ud560 \ub370\uc774\ud130\ub97c \uc900\ube44\ud558\ub294 \uac83\uc740 \uccab \ubc88\uc9f8 \ub2e8\uacc4\uc785\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \uc0ac\uc6a9\uc790\uc758 \uc774\ub984\uacfc \uc774\uba54\uc77c \uc8fc\uc18c\ub97c \ud3ec\ud568\ud558\ub294 \uc608\uc81c \ub370\uc774\ud130\uc785\ub2c8\ub2e4:\n <\/p>\n

\nconst users = [\n    { id: 1, name: \"\ud64d\uae38\ub3d9\", email: \"hong@example.com\" },\n    { id: 2, name: \"\uae40\ucca0\uc218\", email: \"kim@example.com\" },\n    { id: 3, name: \"\uc774\uc601\ud76c\", email: \"lee@example.com\" }\n];\n    <\/code><\/pre>\n
1.2. \ud14c\uc774\ube14 \ucef4\ud3ec\ub10c\ud2b8 \uc0dd\uc131<\/h3>\n
\n        \uc774\uc81c \ud14c\uc774\ube14 \uad6c\uc870\ub97c \ub9cc\ub4e4\uae30 \uc704\ud574 \uc0c8\ub85c\uc6b4 \ub9ac\uc561\ud2b8 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. \uc774 \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc0c1\ub2e8\uc5d0 \uc81c\ubaa9 \ud589\uacfc \uac01 \uc0ac\uc6a9\uc790\uc758 \uc815\ubcf4\ub97c \ub098\uc5f4\ud558\ub294 \ud589\uc744 \ud3ec\ud568\ud569\ub2c8\ub2e4.\n    <\/p>\n
\nimport React from 'react';\n\nconst UserTable = ({ users }) => {\n    return (\n        \n            \n                \n                    \n                {users.map(user => (\n                    \n                        
ID<\/th>\n                    \uc774\ub984<\/th>\n                    \uc774\uba54\uc77c<\/th>\n                <\/tr>\n            <\/thead>\n            
{user.id}<\/td>\n                        {user.name}<\/td>\n                        {user.email}<\/td>\n                    <\/tr>\n                ))}\n            <\/tbody>\n        <\/table>\n    );\n};\n\nexport default UserTable;\n    <\/code><\/pre>\n
2. \uc0ac\uc6a9\uc790 \ub370\uc774\ud130\uc640 \ubc14\uc778\ub529<\/h2>\n
\n        \uc774\uc81c \uc0ac\uc6a9\uc790 \ub370\uc774\ud130\ub97c \uc774 \ud14c\uc774\ube14\uacfc \ubc14\uc778\ub529\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub80c\ub354\ub9c1\ub420 \ub54c, \ub370\uc774\ud130\uac00 \uc5b4\ub5bb\uac8c \ud45c\uc2dc\ub418\ub294\uc9c0 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.\n    <\/p>\n
2.1. \ub370\uc774\ud130 \ubc14\uc778\ub529<\/h3>\n
\n        \ub370\uc774\ud130\ub97c \ud14c\uc774\ube14 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uc804\ub2ec\ud558\ub294 \ubc29\ubc95\uc740 props\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc785\ub2c8\ub2e4. App \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9cc\ub4e4\uc5b4 UserTable\uc5d0 \ub370\uc774\ud130\ub97c \uc804\ub2ec\ud569\ub2c8\ub2e4.\n    <\/p>\n
\nimport React from 'react';\nimport UserTable from '.\/UserTable';\n\nconst App = () => {\n    const users = [\n        { id: 1, name: \"\ud64d\uae38\ub3d9\", email: \"hong@example.com\" },\n        { id: 2, name: \"\uae40\ucca0\uc218\", email: \"kim@example.com\" },\n        { id: 3, name: \"\uc774\uc601\ud76c\", email: \"lee@example.com\" }\n    ];\n\n    return (\n        
\n            
\uc0ac\uc6a9\uc790 \ubaa9\ub85d<\/h1>\n            <\/usertable>\n        <\/div>\n    );\n};\n\nexport default App;\n    <\/code><\/pre>\n
3. \uae30\ubcf8 \uc2a4\ud0c0\uc77c\ub9c1<\/h2>\n
\n        \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\uc5d0\uc11c \uc2a4\ud0c0\uc77c\ub9c1\uc740 \ub9e4\uc6b0 \uc911\uc694\ud569\ub2c8\ub2e4. \ud14c\uc774\ube14\uc758 \uae30\ubcf8\uc801\uc778 \uc2a4\ud0c0\uc77c\ub9c1\uc744 \ucd94\uac00\ud558\uc5ec \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \ud5a5\uc0c1\uc2dc\ud0ac \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc704\uc758 \ucf54\ub4dc\ub97c \uc218\uc815\ud558\uc5ec CSS\ub97c \ucd94\uac00\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.\n    <\/p>\n
\nconst tableStyle = {\n    width: '100%',\n    borderCollapse: 'collapse',\n    marginTop: '20px',\n};\n\nconst thStyle = {\n    backgroundColor: '#007acc',\n    color: 'white',\n    padding: '10px',\n    textAlign: 'left',\n};\n\nconst tdStyle = {\n    border: '1px solid #ccc',\n    padding: '10px',\n    textAlign: 'left',\n};\n\nconst UserTable = ({ users }) => {\n    return (\n        \n            \n                \n                    \n                {users.map(user => (\n                    \n                        
ID<\/th>\n                    \uc774\ub984<\/th>\n                    \uc774\uba54\uc77c<\/th>\n                <\/tr>\n            <\/thead>\n            
{user.id}<\/td>\n                        {user.name}<\/td>\n                        {user.email}<\/td>\n                    <\/tr>\n                ))}\n            <\/tbody>\n        <\/table>\n    );\n};\n    <\/code><\/pre>\n
4. \ub3d9\uc801 \ub370\uc774\ud130 \ucc98\ub9ac<\/h2>\n
\n        \ub9ac\uc561\ud2b8\uc758 \uc7a5\uc810 \uc911 \ud558\ub098\ub294 \uc0c1\ud0dc(state)\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub370\uc774\ud130\ub97c \ub3d9\uc801\uc73c\ub85c \uc5c5\ub370\uc774\ud2b8\ud560 \uc218 \uc788\ub2e4\ub294 \uac83\uc785\ub2c8\ub2e4. \uc774\uc81c \uc0ac\uc6a9\uc790 \ubaa9\ub85d\uc5d0 \uc0c8\ub85c\uc6b4 \uc0ac\uc6a9\uc790\ub97c \ucd94\uac00\ud560 \uc218 \uc788\ub294 \uae30\ub2a5\uc744 \ucd94\uac00\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.\n    <\/p>\n
4.1. \uc0ac\uc6a9\uc790 \ucd94\uac00 \uae30\ub2a5 \uad6c\ud604<\/h3>\n
\n        \uc0ac\uc6a9\uc790 \ubaa9\ub85d\uc744 \uad00\ub9ac\ud558\uae30 \uc704\ud574 useState \ud6c4\ud06c\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc0ac\uc6a9\uc790 \uc0c1\ud0dc\ub97c \uad00\ub9ac\ud569\ub2c8\ub2e4. \uc0c8\ub85c\uc6b4 \uc0ac\uc6a9\uc790 \uc815\ubcf4\ub97c \uc785\ub825\ud560 \uc218 \uc788\ub294 \ud3fc\uc744 \ucd94\uac00\ud558\uace0, \uc774\ud3fc\uc744 \ud1b5\ud574 \uc0ac\uc6a9\uc790\ub97c \ucd94\uac00\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n    <\/p>\n
\nimport React, { useState } from 'react';\nimport UserTable from '.\/UserTable';\n\nconst App = () => {\n    const [users, setUsers] = useState([\n        { id: 1, name: \"\ud64d\uae38\ub3d9\", email: \"hong@example.com\" },\n        { id: 2, name: \"\uae40\ucca0\uc218\", email: \"kim@example.com\" },\n        { id: 3, name: \"\uc774\uc601\ud76c\", email: \"lee@example.com\" }\n    ]);\n    const [name, setName] = useState('');\n    const [email, setEmail] = useState('');\n\n    const addUser = () => {\n        const newUser = {\n            id: users.length + 1,\n            name,\n            email,\n        };\n        setUsers([...users, newUser]);\n        setName('');\n        setEmail('');\n    };\n\n    return (\n        
\n            
\uc0ac\uc6a9\uc790 \ubaa9\ub85d<\/h1>\n            <\/usertable>\n            
\uc0ac\uc6a9\uc790 \ucd94\uac00<\/h2>\n             setName(e.target.value)}\n                placeholder=\"\uc774\ub984\"\n            \/>\n             setEmail(e.target.value)}\n                placeholder=\"\uc774\uba54\uc77c\"\n            \/>\n