{"id":176,"date":"2025-07-29T11:09:25","date_gmt":"2025-07-29T02:09:25","guid":{"rendered":"https:\/\/hed-g.me\/?p=176"},"modified":"2025-07-29T11:09:25","modified_gmt":"2025-07-29T02:09:25","slug":"%ed%83%80%ec%9e%85%ec%8a%a4%ed%81%ac%eb%a6%bd%ed%8a%b8","status":"publish","type":"post","link":"https:\/\/hed-g.me\/?p=176","title":{"rendered":"\ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">\ud83d\ude80 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uac1c\ubc1c\uc790\ub77c\uba74 \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8\ub97c \uaf2d \uc368\uc57c \ud558\ub294 \uc774\uc720 (\uae30\ucd08\ud3b8)<\/h2>\n\n\n\n<p>\uc548\ub155\ud558\uc138\uc694! \uc624\ub298\uc740 \ub9ce\uc740 \uac1c\ubc1c\uc790\uac00 \uc0ac\ub791\ud558\ub294, \uadf8\ub9ac\uace0 \uc5b4\uca4c\uba74 \uba87\uba87 \ubd84\ub4e4\uc740 \uc544\uc9c1 \ub9dd\uc124\uc774\uace0 \uacc4\uc2e4 <strong>\ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8(TypeScript)<\/strong>\uc5d0 \ub300\ud574 \uc774\uc57c\uae30\ud574\ubcf4\ub824\uace0 \ud569\ub2c8\ub2e4. &#8220;\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub3c4 \ucda9\ubd84\ud788 \uc88b\uc740\ub370, \uad73\uc774 \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8\uae4c\uc9c0 \ubc30\uc6cc\uc57c \ud560\uae4c?&#8221;\ub77c\uace0 \uc0dd\uac01\ud558\uc168\ub2e4\uba74, \uc774 \uae00\uc744 \ud1b5\ud574 \uadf8 \uc0dd\uac01\uc774 \ubc14\ub014\uc9c0\ub3c4 \ubaa8\ub985\ub2c8\ub2e4. \ud83d\ude09<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83e\udd14 \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8, \ub300\uccb4 \uc815\uccb4\uac00 \ubb50\uc57c?<\/h3>\n\n\n\n<p>\uac00\uc7a5 \uac04\ub2e8\ud558\uac8c \ub9d0\ud574\ubcfc\uae4c\uc694? \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8\ub294 <strong>\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0 \ud0c0\uc785(Type) \uc2dc\uc2a4\ud15c\uc744 \ucd94\uac00\ud55c \uc5b8\uc5b4<\/strong>\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<p>\uacf5\uc2dd \ubb38\uc11c\uc5d0\uc11c\ub3c4 \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8\ub97c &#8216;\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uc704\uc5d0 \uc788\ub294 \ub808\uc774\uc5b4&#8217;\ub77c\uace0 \uc18c\uac1c\ud569\ub2c8\ub2e4. \uc644\uc804\ud788 \uc0c8\ub85c\uc6b4 \uc5b8\uc5b4\ub77c\uae30\ubcf4\ub2e4\ub294, \uae30\uc874 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \ubaa8\ub4e0 \uae30\ub2a5\uc744 \ud3ec\ud568\ud558\uba74\uc11c &#8216;\ud0c0\uc785&#8217;\uc774\ub77c\ub294 \uac15\ub825\ud55c \uc548\uc804\uc7a5\uce58\ub97c \ucd94\uac00\ud55c <strong>\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \uc0c1\uc704 \uc9d1\ud569(Superset)<\/strong>\uc778 \uc148\uc774\uc8e0.<\/p>\n\n\n\n<p>\uc774 \ub9d0\uc740 \uace7, \uc5ec\ub7ec\ubd84\uc774 \uc791\uc131\ud558\ub294 \ubaa8\ub4e0 <code>.ts<\/code> \ud30c\uc77c \uc548\uc5d0\uc11c \uae30\uc874\uc5d0 \uc54c\ub358 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ubb38\ubc95\uc744 \uadf8\ub300\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4\ub294 \ub73b\uc785\ub2c8\ub2e4. \uba4b\uc9c0\uc9c0 \uc54a\ub098\uc694?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u2728 \uc65c \ub2e4\ub4e4 \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc0ac\uc6a9\ud560\uae4c?<\/h3>\n\n\n\n<p>\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \uac00\uc7a5 \ud070 \ud2b9\uc9d5\uc740 &#8216;\uc720\uc5f0\ud568&#8217;\uc785\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \uc774 \uc720\uc5f0\ud568\uc740 \ub54c\ub85c \uc591\ub0a0\uc758 \uac80\uc774 \ub418\uc5b4, \uc608\uc0c1\uce58 \ubabb\ud55c \uacf3\uc5d0\uc11c \uc5d0\ub7ec\ub97c \ubc1c\uc0dd\uc2dc\ud0a4\uace4 \ud569\ub2c8\ub2e4. <code>undefined is not a function<\/code> \uac19\uc740 \uc5d0\ub7ec \uba54\uc2dc\uc9c0, \ub2e4\ub4e4 \ud55c \ubc88\ucbe4\uc740 \ub9cc\ub098\ubcf4\uc168\uc8e0?<\/p>\n\n\n\n<p>\ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8\ub294 \ubc14\ub85c \uc774 \uc9c0\uc810\uc5d0\uc11c \uc9c4\uac00\ub97c \ubc1c\ud718\ud569\ub2c8\ub2e4. \ucf54\ub4dc\ub97c \uc2e4\ud589\ud558\uae30 \uc804, <strong>\ucef4\ud30c\uc77c \ub2e8\uacc4\uc5d0\uc11c\ubd80\ud130 \ud0c0\uc785\uc744 \uccb4\ud06c\ud574 \uc5d0\ub7ec\ub97c \ubbf8\ub9ac \uc54c\ub824\uc8fc\uac70\ub4e0\uc694.<\/strong> \ub355\ubd84\uc5d0 \uc6b0\ub9ac\ub294 \uc18c\uc911\ud55c \uc2dc\uac04\uc744 \uc544\ub07c\uace0, \uc2e4\uc218\ub97c \ud68d\uae30\uc801\uc73c\ub85c \uc904\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8\uc758 \ud575\uc2ec \uc7a5\uc810 5\uac00\uc9c0<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\uc815\uc801 \ud0c0\uc785 \uac80\uc0ac<\/strong>: \ucf54\ub4dc\ub97c \uc2e4\ud589\ud558\uae30\ub3c4 \uc804\uc5d0 \ud0c0\uc785 \uad00\ub828 \uc624\ub958\ub97c \uc7a1\uc544\ub0b4 \ubc84\uadf8\ub97c \uc0ac\uc804\uc5d0 \ubc29\uc9c0\ud569\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>\ub611\ub611\ud55c \uc790\ub3d9\uc644\uc131<\/strong>: VSCode\uc640 \uac19\uc740 \uc5d0\ub514\ud130\uc5d0\uc11c \ubcc0\uc218, \ud568\uc218, props\uc758 \ud0c0\uc785\uc744 \ucd94\ub860\ud574 \ub180\ub78d\ub3c4\ub85d \uc815\ud655\ud55c \uc790\ub3d9\uc644\uc131\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>\ucf54\ub4dc \uac00\ub3c5\uc131 \ud5a5\uc0c1<\/strong>: \ud568\uc218\uc758 \ub9e4\uac1c\ubcc0\uc218\ub098 \ubc18\ud658 \uac12, \uac1d\uccb4\uc758 \uad6c\uc870\uac00 \uba85\ud655\ud788 \ubcf4\uc5ec \ucf54\ub4dc\ub97c \uc774\ud574\ud558\uae30 \ud6e8\uc52c \uc26c\uc6cc\uc9d1\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>\uc6d0\ud65c\ud55c \ud611\uc5c5\uc744 \uc704\ud55c \ucd5c\uace0\uc758 \ub3c4\uad6c<\/strong>: &#8220;\uc774 API \uc751\ub2f5\uc5d0 \uc5b4\ub5a4 \ub370\uc774\ud130\uac00 \ub4e4\uc5b4\uc788\uc9c0?&#8221; \uc640 \uac19\uc740 \uc9c8\ubb38\uc774 \uc0ac\ub77c\uc9d1\ub2c8\ub2e4. \ud0c0\uc785\uc744 \ubcf4\uba74 \ubaa8\ub4e0 \uad6c\uc870\ub97c \uc54c \uc218 \uc788\uc73c\ub2c8\uae4c\uc694.<\/li>\n\n\n\n<li><strong>\ub300\uaddc\ubaa8 \ud504\ub85c\uc81d\ud2b8\uc5d0 \ucd5c\uc801\ud654<\/strong>: \ud504\ub85c\uc81d\ud2b8\uac00 \ucee4\uc9c0\uace0 \ubcf5\uc7a1\ud574\uc838\ub3c4, \ud0c0\uc785 \uc2dc\uc2a4\ud15c \ub355\ubd84\uc5d0 \uc720\uc9c0\ubcf4\uc218\uc640 \ud655\uc7a5\uc774 \ub9e4\uc6b0 \uc6a9\uc774\ud569\ub2c8\ub2e4.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u270d\ufe0f \uae30\ubcf8 \ud0c0\uc785 \uc0ac\uc6a9\ubc95 (Type Annotations)<\/h3>\n\n\n\n<p>\uc790, \uadf8\ub7fc \uc774\uc81c \uc2e4\uc81c\ub85c \ud0c0\uc785\uc744 \uc5b4\ub5bb\uac8c \uc0ac\uc6a9\ud558\ub294\uc9c0 \uc54c\uc544\ubcfc\uae4c\uc694? \ubcc0\uc218 \uc774\ub984 \ub4a4\uc5d0 \ucf5c\ub860(<code>:<\/code>)\uc744 \ubd99\uc774\uace0 \ud0c0\uc785\uc744 \uba85\uc2dc\ud558\uba74 \ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ \uc22b\uc790 \ud0c0\uc785\nlet age: number = 27;\n\n\/\/ \ubb38\uc790\uc5f4 \ud0c0\uc785\nconst name: string = \"Jihyun Kim\";\n\n\/\/ \ubd88\ub9ac\uc5b8 \ud0c0\uc785\nlet isActive: boolean = true;\n\n\/\/ \uc720\ub2c8\uc5b8 \ud0c0\uc785 (\ub458 \uc774\uc0c1\uc758 \ud0c0\uc785\uc744 \ud5c8\uc6a9)\nlet id: string | number = \"abc-123\";\nid = 456; \/\/ OK!\n\n\/\/ \ubc30\uc5f4 \ud0c0\uc785\nlet list: number&#91;] = &#91;1, 2, 3];\n\/\/ let list: Array&lt;number&gt; = &#91;1, 2, 3]; \/\/ \uc774\ub807\uac8c\ub3c4 \uc0ac\uc6a9 \uac00\ub2a5!\n\n\/\/ \uac1d\uccb4 \ud0c0\uc785\nconst user: { name: string; age: number } = {\n  name: \"Jihyun\",\n  age: 27,\n};\n\n\/\/ \ud568\uc218 \ud0c0\uc785 (\ub9e4\uac1c\ubcc0\uc218\uc640 \ubc18\ud658 \uac12\uc5d0 \ud0c0\uc785 \uc9c0\uc815)\nfunction greet(name: string): string {\n  return \"Hi, \" + name;\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\uc788\uc744 \uc218\ub3c4, \uc5c6\uc744 \uc218\ub3c4 \uc788\ub2e4\uba74? Optional Property<\/h4>\n\n\n\n<p>\uac1d\uccb4\uc758 \uc18d\uc131 \uc911 \ud544\uc218\uac00 \uc544\ub2cc \uac12\uc774 \uc788\ub2e4\uba74 \uc18d\uc131 \uc774\ub984 \ub4a4\uc5d0 \ubb3c\uc74c\ud45c(<code>?<\/code>)\ub97c \ubd99\uc5ec <strong>\uc120\ud0dd\uc801 \uc18d\uc131(Optional Property)<\/strong>\uc73c\ub85c \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>type Info = {\n  title: string;\n  description?: string; \/\/ description\uc740 \uc788\uc5b4\ub3c4 \ub418\uace0, \uc5c6\uc5b4\ub3c4 \ub429\ub2c8\ub2e4.\n};\n\nconst data1: Info = {\n  title: \"\uccab \ubc88\uc9f8 \uc815\ubcf4\",\n  description: \"\uc774\uac83\uc740 \uc124\uba85\uc785\ub2c8\ub2e4.\",\n};\n\nconst data2: Info = {\n  title: \"\ub450 \ubc88\uc9f8 \uc815\ubcf4\", \/\/ description\uc774 \uc5c6\uc5b4\ub3c4 \uc5d0\ub7ec\uac00 \ub098\uc9c0 \uc54a\uc544\uc694.\n};<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\ud568\uc218\uc5d0 \ud0c0\uc785 \uc785\ud788\uae30<\/h4>\n\n\n\n<p>\ud568\uc218\uc5d0 \ud0c0\uc785\uc744 \uc9c0\uc815\ud558\ub294 \uba87 \uac00\uc9c0 \ubc29\ubc95\uc744 \uc54c\uc544\ubd05\uc2dc\ub2e4.<\/p>\n\n\n\n<p><strong>1. \ud568\uc218 \uc120\uc5b8\uc2dd<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function greet(name: string): string {\n  return `Hello, ${name}`;\n}<\/code><\/pre>\n\n\n\n<p><strong>2. \ud654\uc0b4\ud45c \ud568\uc218<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ \ud568\uc218 \uc120\uc5b8\uacfc \ub3d9\uc2dc\uc5d0 \ud0c0\uc785 \uc9c0\uc815\nconst greet = (name: string): string =&gt; {\n  return `Hello, ${name}`;\n};\n\n\/\/ \ud568\uc218 \uc804\uccb4\uc758 \ud0c0\uc785\uc744 \ubbf8\ub9ac \uc120\uc5b8 (\ucef4\ud3ec\ub10c\ud2b8 props\ub85c \ud568\uc218\ub97c \ubc1b\uc744 \ub54c \ub9e4\uc6b0 \uc720\uc6a9!)\ntype GreetFunc = (name: string) =&gt; string;\n\nconst greet2: GreetFunc = (name) =&gt; {\n  return `Hello, ${name}`;\n};<\/code><\/pre>\n\n\n\n<p><strong>3. \ubc18\ud658 \uac12\uc774 \uc5c6\ub294 \ud568\uc218<\/strong><\/p>\n\n\n\n<p>\ud568\uc218\uac00 \uc544\ubb34\uac83\ub3c4 \ubc18\ud658\ud558\uc9c0 \uc54a\ub294\ub2e4\uba74 <code>void<\/code> \ud0c0\uc785\uc744 \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function logMessage(message: string): void {\n  console.log(message);\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\ud0c0\uc785\uc744 \uc815\uc758\ud558\ub294 \ub450 \uac00\uc9c0 \ubc29\ubc95: <code>type<\/code> vs <code>interface<\/code><\/h4>\n\n\n\n<p>\uac1d\uccb4\uc758 \ud0c0\uc785\uc744 \uc815\uc758\ud560 \ub54c \uc8fc\ub85c <code>type<\/code>\uacfc <code>interface<\/code>\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<p><strong>1. <code>type<\/code>\uc73c\ub85c \uc9c1\uc811 \ud0c0\uc785 \uc120\uc5b8\ud558\uae30<\/strong><\/p>\n\n\n\n<p>\uac00\ubccd\uace0 \ube60\ub974\uac8c \ud0c0\uc785\uc744 \uc815\uc758\ud560 \uc218 \uc788\uc9c0\ub9cc, \ud655\uc7a5\uc740 \uc870\uae08 \ubd88\ud3b8\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>type ProductType = {\n  name: string;\n  price: number;\n};\n\nconst product: ProductType = {\n  name: \"\ub178\ud2b8\ubd81\",\n  price: 1500000,\n};<\/code><\/pre>\n\n\n\n<p><strong>2. <code>interface<\/code> \uc0ac\uc6a9\ud558\uae30<\/strong><\/p>\n\n\n\n<p><code>extends<\/code> \ud0a4\uc6cc\ub4dc\ub85c \uc0c1\uc18d(\ud655\uc7a5)\uc774 \uac00\ub2a5\ud574 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub098 \ucef4\ud3ec\ub10c\ud2b8\uc758 props \ud0c0\uc785\uc744 \uc815\uc758\ud560 \ub54c \ub9e4\uc6b0 \uc720\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>interface Product {\n  name: string;\n  price: number;\n}\n\ninterface DiscountedProduct extends Product {\n  discountRate: number;\n}\n\nconst discountedProduct: DiscountedProduct = {\n  name: \"\ud0a4\ubcf4\ub4dc\",\n  price: 200000,\n  discountRate: 0.1,\n};<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u269b\ufe0f \ub9ac\uc561\ud2b8 \ucef4\ud3ec\ub10c\ud2b8\uc640 \ud6c5\uc5d0\uc11c \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8 \ud65c\uc6a9\ud558\uae30<\/h3>\n\n\n\n<p>\uc774\ub860\uc740 \ucda9\ubd84\ud788 \ubd24\uc73c\ub2c8, \uc774\uc81c \ub9ac\uc561\ud2b8\uc5d0\uc11c \uc2e4\uc81c\ub85c \uc5b4\ub5bb\uac8c \uc4f0\uc774\ub294\uc9c0 \uc0b4\ud3b4\ubcfc\uae4c\uc694?<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><code>useState<\/code>\uc5d0 \ud0c0\uc785 \uc9c0\uc815\ud558\uae30<\/h4>\n\n\n\n<p><code>useState<\/code>\ub97c \uc0ac\uc6a9\ud560 \ub54c \uc81c\ub124\ub9ad(<code>&lt;&gt;<\/code>) \ubb38\ubc95\uc73c\ub85c \uc0c1\ud0dc\uc758 \ud0c0\uc785\uc744 \uc9c0\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { useState } from \"react\";\n\nexport default function Counter() {\n  \/\/ count \uc0c1\ud0dc\ub294 number \ud0c0\uc785\ub9cc \uac00\uc9c8 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n  const &#91;count, setCount] = useState&lt;number&gt;(0);\n\n  return &lt;button onClick={() =&gt; setCount(count + 1)}&gt;Click: {count}&lt;\/button&gt;;\n}<\/code><\/pre>\n\n\n\n<p>\ub9cc\uc57d \uc0c1\ud0dc\uc758 \ucd08\uae30\uac12\uc774 <code>null<\/code>\uc77c \uc218 \uc788\ub2e4\uba74 \uc720\ub2c8\uc5b8 \ud0c0\uc785\uc744 \ud65c\uc6a9\ud558\uc138\uc694.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ user \uc0c1\ud0dc\ub294 string \ub610\ub294 null \ud0c0\uc785\uc744 \uac00\uc9c8 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\nconst &#91;user, setUser] = useState&lt;string | null&gt;(null);<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><code>props<\/code>\uc5d0 \ud0c0\uc785 \uc9c0\uc815\ud558\uae30<\/h4>\n\n\n\n<p>\ucef4\ud3ec\ub10c\ud2b8\uac00 \ubc1b\ub294 <code>props<\/code>\uc758 \ud0c0\uc785\uc744 <code>type<\/code>\uc774\ub098 <code>interface<\/code>\ub85c \uc815\uc758\ud558\uba74 \uc2e4\uc218\ub97c \ubc29\uc9c0\ud558\uace0 \uc7ac\uc0ac\uc6a9\uc131\uc744 \ub192\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from \"react\";\n\n\/\/ InfoCard \ucef4\ud3ec\ub10c\ud2b8\uac00 \ubc1b\uc744 props\uc758 \ud0c0\uc785\uc744 \uc815\uc758\ud569\ub2c8\ub2e4.\ntype InfoCardProps = {\n  title: string;\n  description?: string; \/\/ \uc120\ud0dd\uc801 prop\n};\n\nexport default function InfoCard({ title, description }: InfoCardProps) {\n  return (\n    &lt;div&gt;\n      &lt;h1&gt;{title}&lt;\/h1&gt;\n      {description &amp;&amp; &lt;p&gt;{description}&lt;\/p&gt;}\n    &lt;\/div&gt;\n  );\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><code>useEffect<\/code>\uc5d0\uc11c \ud0c0\uc785 \ud65c\uc6a9\ud558\uae30<\/h4>\n\n\n\n<p><code>useEffect<\/code> \uc790\uccb4\uc5d0\ub294 \ud2b9\ubcc4\ud55c \ud0c0\uc785\uc774 \ud544\uc694 \uc5c6\uc9c0\ub9cc, \ube44\ub3d9\uae30 API \ud638\ucd9c \ud6c4 \ubc1b\uc544\uc628 \ub370\uc774\ud130\uc758 \ud0c0\uc785\uc744 \uc9c0\uc815\ud560 \ub54c \ub9e4\uc6b0 \uc720\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { useEffect, useState } from \"react\";\n\n\/\/ API \uc751\ub2f5 \ub370\uc774\ud130\uc758 \ud0c0\uc785\uc744 \ubbf8\ub9ac \uc815\uc758\ud569\ub2c8\ub2e4.\ninterface UserData {\n  name: string;\n}\n\nexport default function UserInfo() {\n  const &#91;name, setName] = useState&lt;string&gt;(\"\");\n\n  useEffect(() =&gt; {\n    fetch(\"\/api\/user\")\n      .then((res) =&gt; res.json())\n      .then((data: UserData) =&gt; { \/\/ \ubc1b\uc544\uc628 \ub370\uc774\ud130\uc758 \ud0c0\uc785\uc744 \uc9c0\uc815\n        setName(data.name);\n      });\n  }, &#91;]);\n\n  return &lt;div&gt;\uc0ac\uc6a9\uc790 \uc774\ub984: {name}&lt;\/div&gt;;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\ub9c8\ubb34\ub9ac\ud558\uba70<\/h3>\n\n\n\n<p>\uc5b4\ub5a0\uc168\ub098\uc694? \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8\uac00 \ucc98\uc74c\uc5d0\ub294 \uc870\uae08 \ubc88\uac70\ub86d\uac8c \ub290\uaef4\uc9c8 \uc218 \uc788\uc9c0\ub9cc, \uc775\uc219\ud574\uc9c0\ub294 \uc21c\uac04 \uc774\uc804\uc758 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ucf54\ub4dc\ub85c \ub3cc\uc544\uac00\uae30 \uc5b4\ub824\uc6b8 \ub9cc\ud07c \uac15\ub825\ud55c \uc548\uc815\uc131\uacfc \uac1c\ubc1c \ud3b8\uc758\uc131\uc744 \uc81c\uacf5\ud574 \uc900\ub2f5\ub2c8\ub2e4.<\/p>\n\n\n\n<p>\uc624\ub298 \uc18c\uac1c\ud55c \ub0b4\uc6a9\uc740 \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8\uc758 \uc815\ub9d0 \uae30\ubcf8\uc801\uc778 \ubd80\ubd84\uc785\ub2c8\ub2e4. \uc774 \uae30\ucd08\ub97c \ubc14\ud0d5\uc73c\ub85c \uc5ec\ub7ec\ubd84\uc758 \ud504\ub85c\uc81d\ud2b8\uc5d0 \uc870\uae08\uc529 \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc801\uc6a9\ud574 \ubcf4\uc2dc\uba74 \uc5b4\ub5a8\uae4c\uc694? \ubd84\uba85 \ub354 \uc990\uac81\uace0 \uc0dd\uc0b0\uc801\uc778 \uac1c\ubc1c \uacbd\ud5d8\uc744 \ud558\uac8c \ub418\uc2e4 \uac81\ub2c8\ub2e4<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\ude80 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uac1c\ubc1c\uc790\ub77c\uba74 \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8\ub97c \uaf2d \uc368\uc57c \ud558\ub294 \uc774\uc720 (\uae30\ucd08\ud3b8) \uc548\ub155\ud558\uc138\uc694! \uc624\ub298\uc740 \ub9ce\uc740 \uac1c\ubc1c\uc790\uac00 \uc0ac\ub791\ud558\ub294, \uadf8\ub9ac\uace0 \uc5b4\uca4c\uba74 \uba87\uba87 \ubd84\ub4e4\uc740 \uc544\uc9c1 \ub9dd\uc124\uc774\uace0 \uacc4\uc2e4 \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8(TypeScript)\uc5d0 \ub300\ud574 \uc774\uc57c\uae30\ud574\ubcf4\ub824\uace0 \ud569\ub2c8\ub2e4. &#8220;\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub3c4 \ucda9\ubd84\ud788 \uc88b\uc740\ub370, \uad73\uc774 \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8\uae4c\uc9c0 \ubc30\uc6cc\uc57c \ud560\uae4c?&#8221;\ub77c\uace0 \uc0dd\uac01\ud558\uc168\ub2e4\uba74, \uc774 \uae00\uc744 \ud1b5\ud574 \uadf8 \uc0dd\uac01\uc774 \ubc14\ub014\uc9c0\ub3c4 \ubaa8\ub985\ub2c8\ub2e4. \ud83d\ude09 \ud83e\udd14 \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8, \ub300\uccb4 \uc815\uccb4\uac00 \ubb50\uc57c? \uac00\uc7a5 \uac04\ub2e8\ud558\uac8c \ub9d0\ud574\ubcfc\uae4c\uc694? \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0 \ud0c0\uc785(Type) \uc2dc\uc2a4\ud15c\uc744 \ucd94\uac00\ud55c \uc5b8\uc5b4\uc785\ub2c8\ub2e4. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[144],"tags":[],"class_list":["post-176","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/176","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=176"}],"version-history":[{"count":1,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/176\/revisions"}],"predecessor-version":[{"id":177,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/176\/revisions\/177"}],"wp:attachment":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=176"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=176"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=176"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}