{"id":173,"date":"2026-06-26T13:33:09","date_gmt":"2026-06-26T13:33:09","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=173"},"modified":"2026-06-26T13:33:09","modified_gmt":"2026-06-26T13:33:09","slug":"%ec%95%b1%ec%a0%9c%ec%9e%91-%ec%a4%80%eb%b9%84","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/%ec%95%b1%ec%a0%9c%ec%9e%91-%ec%a4%80%eb%b9%84\/","title":{"rendered":"\uc571\uc81c\uc791-\uc900\ube44"},"content":{"rendered":"<h3><strong>1. \uc2dc\uc791\ud30c\uc77c<\/strong><\/h3>\n<p><a href=\"https:\/\/qwerewqwerew.github.io\/retype-react\/%EB%A0%88%EC%8B%9C%ED%94%BC%EC%95%B1\/6\/#%ED%8C%8C%EC%9D%BC%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C\"><strong>\ud30c\uc77c\ub2e4\uc6b4\ub85c\ub4dc<\/strong><\/a><br \/>\n<a href=\"https:\/\/qwerewqwerew.github.io\/retype-react\/%EB%A0%88%EC%8B%9C%ED%94%BC%EC%95%B1\/6\/#%ED%8C%8C%EC%9D%BC%ED%99%9C%EC%9A%A9%EB%B0%A9%EB%B2%95\"><strong>\ud30c\uc77c\ud65c\uc6a9\ubc29\ubc95<\/strong><\/a><br \/>\n\ub9cc\uc57d \uc774\uc804 \ud30c\uc77c\uc774 \uc5c6\uc744 \uacbd\uc6b0 \uc544\ub798\uc758 \ud30c\uc77c\uc744 \ub2e4\uc6b4\ub85c\ub4dc \ud558\uc5ec \uc9c4\ud589\ud55c\ub2e4<br \/>\n<a href=\"https:\/\/qwerewqwerew.github.io\/retype-react\/%EB%A0%88%EC%8B%9C%ED%94%BC%EC%95%B1\/assets\/06\/start.zip\"><strong>\uc2dc\uc791 \ud30c\uc77c<\/strong><\/a><\/p>\n<h3><a href=\"https:\/\/qwerewqwerew.github.io\/retype-react\/%EB%A0%88%EC%8B%9C%ED%94%BC%EC%95%B1\/6\/#2-app-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EB%B9%84%EC%9A%B0%EA%B8%B0\"><strong>#<\/strong><\/a><strong>2. App \ucef4\ud3ec\ub10c\ud2b8 \ube44\uc6b0\uae30<\/strong><\/h3>\n<ol>\n<li>.\/src\/App.js \ucef4\ud3ec\ub10c\ud2b8\ub97c \uae68\ub057\ud558\uac8c \uc815\ub9ac\ud558\uc790.<br \/>\n  App.js<\/li>\n<\/ol>\n<pre><code class=\"language-javascript\">function App() {\n return &lt;div className=&#39;App&#39;&gt;&lt;\/div&gt;;\n}\n\nexport default App;\n<\/code><\/pre>\n<p>  1<br \/>\n  2<br \/>\n  3<br \/>\n  4<br \/>\n  5<\/p>\n<ol>\n<li>index.js \uc218\uc815<br \/>\n  index.js<\/li>\n<\/ol>\n<pre><code class=\"language-javascript\">import React from &#39;react&#39;;\nimport ReactDOM from &#39;reactdom\/client&#39;;\nimport &#39;.\/index.css&#39;;\nimport App from &#39;.\/App&#39;;\n\nconst root = ReactDOM.createRoot(document.getElementById(&#39;root&#39;));\nroot.render(\n &lt;&gt;\n \t&lt;App \/&gt;\n &lt;\/&gt;\n);\n<\/code><\/pre>\n<p>  1<br \/>\n  2<br \/>\n  3<br \/>\n  4<br \/>\n  5<br \/>\n  6<br \/>\n  7<br \/>\n  8<br \/>\n  9<br \/>\n  10<br \/>\n  11<\/p>\n<h3><a href=\"https:\/\/qwerewqwerew.github.io\/retype-react\/%EB%A0%88%EC%8B%9C%ED%94%BC%EC%95%B1\/6\/#3-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EB%A1%9C%EB%94%A9-%EC%83%81%ED%83%9C-%ED%91%9C%EC%8B%9C%ED%95%B4%EC%A3%BC%EA%B8%B0\"><strong>#<\/strong><\/a><strong>3. \ub370\uc774\ud130 \ub85c\ub529 \uc0c1\ud0dc \ud45c\uc2dc\ud574\uc8fc\uae30<\/strong><\/h3>\n<ol>\n<li>loading \uc5ec\ubd80\uc5d0 \ub530\ub77c App \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uadf8\ub824\uc57c\ud560 \ub0b4\uc6a9\uc774 \ubcc0\uacbd\ub418\ubbc0\ub85c useState Hook\uc744 \ud65c\uc6a9\ud55c\ub2e4<br \/>\n  App.js<\/li>\n<\/ol>\n<pre><code class=\"language-javascript\">import { useState } from &#39;react&#39;;\nfunction App() {\n\tconst [loading, setLoading] = useState(true);\n\treturn &lt;div className=&#39;App&#39;&gt;&lt;\/div&gt;;\n}\n\nexport default App;\n<\/code><\/pre>\n<p>  1<br \/>\n  2<br \/>\n  3<br \/>\n  4<br \/>\n  5<br \/>\n  6<br \/>\n  7<\/p>\n<h3><a href=\"https:\/\/qwerewqwerew.github.io\/retype-react\/%EB%A0%88%EC%8B%9C%ED%94%BC%EC%95%B1\/6\/#4-%EC%A1%B0%EA%B1%B4%EB%B6%80%EB%A0%8C%EB%8D%94%EB%A7%81\"><strong>#<\/strong><\/a><strong>4. \uc870\uac74\ubd80\ub80c\ub354\ub9c1<\/strong><\/h3>\n<ol>\n<li>loading \ubcc0\uc218\uc758 \uac12\uc774 true \uc77c\uacbd\uc6b0 app \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ub85c\ub529\uc911\uc785\ub2c8\ub2e4\ub97c \ub80c\ub354\ub9c1\ud55c\ub2e4<br \/>\n  App.js<\/li>\n<\/ol>\n<pre><code class=\"language-javascript\">import { useState } from &#39;react&#39;;\nfunction App() {\n\tconst [loading, setLoading] = useState(true);\n\treturn &lt;div className=&#39;App&#39;&gt;{loading &amp;&amp; &lt;h1&gt;\ub85c\ub529\uc911\uc785\ub2c8\ub2e4...&lt;\/h1&gt;}&lt;\/div&gt;;\n}\nexport default App;\n<\/code><\/pre>\n<p>  1<br \/>\n  2<br \/>\n  3<br \/>\n  4<br \/>\n  5<br \/>\n  6<\/p>\n<ul>\n<li>loading \uc758 \uac12\uc774 true \uc774\ubbc0\ub85c \ub85c\ub529\uc911\uc785\ub2c8\ub2e4 \ub80c\ub354\ub9c1\ub41c\ub2e4<\/li>\n<\/ul>\n<h3><a href=\"https:\/\/qwerewqwerew.github.io\/retype-react\/%EB%A0%88%EC%8B%9C%ED%94%BC%EC%95%B1\/6\/#5-%EB%A1%9C%EB%94%A9-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0\"><strong>#<\/strong><\/a><strong>5. \ub85c\ub529 \uad6c\ud604\ud558\uae30<\/strong><\/h3>\n<ol>\n<li>useEffect \ud6c5\uc744 \uc0ac\uc6a9\ud558\uc5ec 0.5\ucd08 \ud6c4 loading \ubcc0\uc218\uc758 \uac12\uc744 \ubcc0\uacbd\ud558\uc5ec \ucef4\ud3ec\ub10c\ud2b8\uc758 \ub0b4\uc6a9\uc744 \ub9ac\ub80c\ub354\uc2dc\ud0a8\ub2e4. \uc774\uc81c 0.5\ucd08\ud6c4 \uc571\uc758 \ud0c0\uc774\ud2c0\uc774 \ucd9c\ub825\ub41c\ub2e4.<br \/>\n  App.js<\/li>\n<\/ol>\n<pre><code class=\"language-javascript\">import { useState, useEffect } from &#39;react&#39;;\nfunction App() {\n\tconst [loading, setLoading] = useState(true);\n\tuseEffect(() =&gt; {\n\t\tsetTimeout(() =&gt; {\n\t\t\tsetLoading(false);\n\t\t}, 500);\n\t}, []);\n\treturn &lt;div className=&#39;App&#39;&gt;{loading ? &lt;h1&gt;\ub85c\ub529\uc911\uc785\ub2c8\ub2e4...&lt;\/h1&gt; : &lt;h1&gt; \ub3c4\ub808\ubbf8\ub808\uc2dc\ud53c&lt;\/h1&gt;}&lt;\/div&gt;;\n}\nexport default App;\n<\/code><\/pre>\n<p>  1<br \/>\n  2<br \/>\n  3<br \/>\n  4<br \/>\n  5<br \/>\n  6<br \/>\n  7<br \/>\n  8<br \/>\n  9<br \/>\n  10<br \/>\n  11<\/p>\n<h3><a href=\"https:\/\/qwerewqwerew.github.io\/retype-react\/%EB%A0%88%EC%8B%9C%ED%94%BC%EC%95%B1\/6\/#6-%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%A5%BC-%EC%96%B4%EB%94%94%EC%97%90-%EC%A0%80%EC%9E%A5%ED%95%A0%EA%B9%8C\"><strong>#<\/strong><\/a><strong>6. \ub370\uc774\ud130\ub97c \uc5b4\ub514\uc5d0 \uc800\uc7a5\ud560\uae4c?<\/strong><\/h3>\n<ol>\n<li>useEffect() \ud6c5\uc5d0 \uc8fc\uc11d\uc744 \uc791\uc131\ud574\ubcf4\uc790.<br \/>\n  \ubc14\ub85c \uadf8 \uc790\ub9ac\uc5d0 \ub808\uc2dc\ud53c \ub370\uc774\ud130\ub97c \ub85c\ub529\ud560 \uac83\uc774\ub2e4.<\/li>\n<\/ol>\n<pre><code class=\"language-text\">```js\n\nfunction App() {\n\tconst [loading, setLoading] = useState(true);\n\tuseEffect(() =&gt; {\n\t\t\/\/\ub808\uc2dc\ud53c\ub370\uc774\ud130\ub85c\ub529\n\t\tsetTimeout(() =&gt; {\n\t\t\tsetLoading(false);\n\t\t}, 500);\n\t}, []);\n\treturn &lt;div className=&#39;App&#39;&gt;{loading ? `&lt;h1&gt;`\ub85c\ub529\uc911\uc785\ub2c8\ub2e4...`&lt;\/h1&gt;` : `&lt;h1&gt;` \ub3c4\ub808\ubbf8\ub808\uc2dc\ud53c`&lt;\/h1&gt;`}`&lt;\/div&gt;`;\n}\nexport default App;\n<\/code><\/pre>\n<pre><code>\n1. \ub85c\ub529\ub41c \ub370\uc774\ud130\ub294 state\uc5d0 \uc800\uc7a5\ud55c\ub2e4\n  \ub808\uc2dc\ud53c\ub370\uc774\ud130\ub97c \ub85c\ub529\ud55c \ub2e4\uc74c state\uc5d0 \uc800\uc7a5\ud558\ub824\uba74 \uc5b4\ub5bb\uac8c \ud574\uc57c \ud560\uae4c?\n  \ub85c\ub529\ub41c \ub808\uc2dc\ud53c \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud560 \uc218 \uc788\ub3c4\ub85d data \ub9cc\ub4e4\uc790. \uc790\ub8cc\ud615\uc740 \ub2f9\uc5f0\ud788 \ubc30\uc5f4\uc774\uace0, \ubc30\uc5f4\ub0b4 \uac1d\uccb4\ub85c \ub370\uc774\ud130\uac00 \ub4e4\uc5b4\uc62c \uac83\uc774\ub2e4.\n  App.js\n\n```javascript\nimport { useState, useEffect } from &#39;react&#39;;\nfunction App() {\n\tconst [loading, setLoading] = useState({ state: true, data: [] });\n\tconsole.log(loading);\n\tuseEffect(() =&gt; {\n\t\t\/\/\ub808\uc2dc\ud53c\ub370\uc774\ud130\ub85c\ub529\n\t\tsetTimeout(() =&gt; {\n\t\t\tsetLoading(false);\n\t\t}, 500);\n\t}, []);\n\treturn &lt;div className=&#39;App&#39;&gt;{loading ? &lt;h1&gt;\ub85c\ub529\uc911\uc785\ub2c8\ub2e4...&lt;\/h1&gt; : &lt;h1&gt; \ub3c4\ub808\ubbf8\ub808\uc2dc\ud53c&lt;\/h1&gt;}&lt;\/div&gt;;\n}\n\nexport default App;\n<\/code><\/pre>\n<p>  1<br \/>\n  2<br \/>\n  3<br \/>\n  4<br \/>\n  5<br \/>\n  6<br \/>\n  7<br \/>\n  8<br \/>\n  9<br \/>\n  10<br \/>\n  11<br \/>\n  12<br \/>\n  13<br \/>\n  14<\/p>\n<h3><a href=\"https:\/\/qwerewqwerew.github.io\/retype-react\/%EB%A0%88%EC%8B%9C%ED%94%BC%EC%95%B1\/6\/#7-%EC%97%AC%EA%B8%B0%EA%B9%8C%EC%A7%80-%EA%B9%83%ED%97%88%EB%B8%8C%EC%97%90-%EC%98%AC%EB%A6%AC%EA%B8%B0\"><strong>#<\/strong><\/a><strong>7. \uc5ec\uae30\uae4c\uc9c0 \uae43\ud5c8\ube0c\uc5d0 \uc62c\ub9ac\uae30<\/strong><\/h3>\n<p>bash<\/p>\n<pre><code class=\"language-text\">git add .\ngit commit m &quot;06 \ud504\ub85c\uc81d\ud2b8 \uc6cc\ubc0d\uc5c5&quot;\ngit push origin main\n<\/code><\/pre>\n<p>1<br \/>\n2<br \/>\n3<\/p>\n<h3><a href=\"https:\/\/qwerewqwerew.github.io\/retype-react\/%EB%A0%88%EC%8B%9C%ED%94%BC%EC%95%B1\/6\/#8-%EC%99%84%EB%A3%8C%ED%8C%8C%EC%9D%BC\"><strong>#<\/strong><\/a><strong>8. \uc644\ub8cc\ud30c\uc77c<\/strong><\/h3>\n<p><a href=\"https:\/\/qwerewqwerew.github.io\/retype-react\/%EB%A0%88%EC%8B%9C%ED%94%BC%EC%95%B1\/assets\/06\/06_fin.zip\"><strong>\uc644\ub8cc \ud30c\uc77c<\/strong><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>1. \uc2dc\uc791\ud30c\uc77c \ud30c\uc77c\ub2e4\uc6b4\ub85c\ub4dc \ud30c\uc77c\ud65c\uc6a9\ubc29\ubc95 \ub9cc\uc57d \uc774\uc804 \ud30c\uc77c\uc774 \uc5c6\uc744 \uacbd\uc6b0 \uc544\ub798\uc758 \ud30c\uc77c\uc744 \ub2e4\uc6b4\ub85c\ub4dc \ud558\uc5ec \uc9c4\ud589\ud55c\ub2e4 \uc2dc\uc791 \ud30c\uc77c #2. App \ucef4\ud3ec\ub10c\ud2b8 \ube44\uc6b0\uae30 .\/src\/App.js \ucef4\ud3ec\ub10c\ud2b8\ub97c \uae68\ub057\ud558\uac8c \uc815\ub9ac\ud558\uc790. App.js function App() { return &lt;div className=&#39;App&#39;&gt;&lt;\/div&gt;; } export default App; 1 2 3 4 5 index.js \uc218\uc815 index.js import React from &#39;react&#39;; import ReactDOM from &#39;reactdom\/client&#39;; import &#39;.\/index.css&#39;; import App &#8230; <a title=\"\uc571\uc81c\uc791-\uc900\ube44\" class=\"read-more\" href=\"https:\/\/coalacoding.com\/%ec%95%b1%ec%a0%9c%ec%9e%91-%ec%a4%80%eb%b9%84\/\" aria-label=\"\uc571\uc81c\uc791-\uc900\ube44\uc5d0 \ub300\ud574 \ub354 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\uc138\uc694\">\ub354 \uc77d\uae30<\/a><\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-173","post","type-post","status-publish","format-standard","hentry","category-react-basics"],"_links":{"self":[{"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/posts\/173","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/comments?post=173"}],"version-history":[{"count":0,"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/posts\/173\/revisions"}],"wp:attachment":[{"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/media?parent=173"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/categories?post=173"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/tags?post=173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}