{"id":4306,"date":"2026-02-15T09:38:15","date_gmt":"2026-02-15T00:38:15","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=4306"},"modified":"2026-02-15T11:48:12","modified_gmt":"2026-02-15T02:48:12","slug":"vitereact-typescript-example1","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2026\/02\/15\/vitereact-typescript-example1\/","title":{"rendered":"[Vite+React]\ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8 \uc608\uc81c \/ TypeScript example"},"content":{"rendered":"\n

\ud83d\udc49\ud83c\udffb \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 + \ud0c0\uc785\uc785\ub2c8\ub2e4.
TypeScript is JavaScript + types.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub294 \uc790\ub3d9\uc73c\ub85c \ud0c0\uc785\uc744 \ucd94\ub860 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \uae30\ub2a5\uc774 \ubd80\uc871\ud560 \uacbd\uc6b0 \uc624\ub958\uac00 \ubc1c\uc0dd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
JavaScript can automatically infer types, but if the functionality is lacking, errors can occur.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb \ud0c0\uc785\uc744 \uc0ac\uc6a9\ud568\uc73c\ub85c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \uc790\ub3d9\ucd94\ub860\uc744 \ubcf4\uc644 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
Using types can complement JavaScript’s automatic inference.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb \ud0c0\uc785\uc2a4\ud06c\ub9bd\uc5d0\uc11c \ud0c0\uc785\uc744 \uc0ac\uc6a9\ud558\ub294 \uacbd\uc6b0\ub294 \ubcc0\uc218, \ud568\uc218 \ud30c\ub77c\ubbf8\ud130\/\ubc18\ud658\uac12, state, props, \uac1d\uccb4\/\ubc30\uc5f4, \uc81c\ub124\ub9ad, \ud0c0\uc785 \ubcc4\uce6d\/\uc778\ud130\ud398\uc774\uc2a4 \ub4f1 \uac70\uc758 \ubaa8\ub4e0 \uac12\uc774 \ub4e4\uc5b4\uac00\ub294 \uacf3\uc5d0 \ud0c0\uc785\uc744 \uc815\uc758\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
When using types in TypeScript, you can define types for almost any value, including variables, function parameters\/return values, state, props, objects\/arrays, generics, type aliases\/interfaces, etc.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb \uc544\ub798\uc758 \ucf54\ub4dc\ub294 \ud0c0\uc785\uc758 \uc0ac\uc6a9\ube48\ub3c4\uac00 \ub192\uc740 \ubd80\ubd84\uc5d0 \ub300\ud55c \uc608\uc81c\uc785\ub2c8\ub2e4.
The code below is an example of a frequently used part of the type.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131 \/ Create project<\/p>\n\n\n\n

% npm create vite@latest ReactExample4 --template react-ts\n% cd ReactExample4\n% npm install\n\n# \uc11c\ubc84 \uc2e4\ud589(\uc2e4\ud589 \ud14c\uc2a4\ud2b8) \/ Running the server (running test)\n# Run the server (run test)\n% npm run dev<\/code><\/pre>\n\n\n\n
\ud83d\udc49\ud83c\udffb \ud504\ub85c\uc81d\ud2b8 \uad6c\uc870 \/ Project structure<\/p>\n\n\n\n
src\/\n\u251c\u2500 types.tsx\n\u251c\u2500 components\/\n\u2502 \u2514\u2500 UserCard.tsx\n\u251c\u2500 App.tsx\n\u251c\u2500 main.tsx<\/code><\/pre>\n\n\n\n
\ud83d\udc49\ud83c\udffb1. \uc804\uc5ed \ud0c0\uc785 \uc815\uc758 (src\/types.ts<\/code>)
Global type definitions (src\/types.ts)<\/p>\n\n\n\n
\/\/ \uc5ec\ub7ec \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uacf5\uc720\ud560 \ud0c0\uc785 \uc815\uc758\nexport type Todo = {\n  id: number;\n  text: string;\n  completed: boolean;\n};<\/code><\/pre>\n\n\n\n
\n\n\n\n
\ud83d\udc49\ud83c\udffb2. Props \ud0c0\uc785 \uc9c0\uc815 (src\/components\/UserCard.tsx<\/code>)
Specifying Prop types (src\/components\/UserCard.tsx)<\/p>\n\n\n\n
import React from \"react\";\n\ntype UserCardProps = {\n  name: string;\n  age?: number; \/\/ \uc120\ud0dd\uc801 props \/ optional props\n};\n\nconst UserCard: React.FC<UserCardProps> = ({ name, age }) => {\n  return (\n    <div style={{ border: \"1px solid gray\", padding: \"10px\", margin: \"5px\" }}>\n      <h2>{name}<\/h2>\n      {age && <p>Age: {age}<\/p>}\n    <\/div>\n  );\n};\n\nexport default UserCard;\n<\/code><\/pre>\n\n\n\n
\u2b50\ufe0f React.FC<UserCardProps><\/p>\n\n\n\n
\u2714\ufe0f React.FC\ub97c \uc0ac\uc6a9\ud558\uba74 children porps\uac00 \uc790\ub3d9 \ud3ec\ud568\ub429\ub2c8\ub2e4.(\ud0c0\uc785\uc5d0 children\uc744 \uc815\uc758\ud558\uc9c0 \uc54a\uc544\ub3c4 \ub429\ub2c8\ub2e4.)
React.FC automatically includes children types (you don’t need to define children in your types).<\/p>\n\n\n\n
\u2714\ufe0f \ud544\uc694\ud55c \uacbd\uc6b0 \uaebc\ub0b4\uc11c \uc0ac\uc6a9 \ud560 \uc218 \uc788\uace0 \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uc744 \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4.
You can take it out and use it if you need to, or you can leave it out if you don’t.<\/p>\n\n\n\n
const UserCard: React.FC<UserCardProps> = ({ name, age, children }) => {\n  return (\n    <div style={{ border: \"1px solid gray\", padding: \"10px\", margin: \"5px\" }}>\n      <h2>{name}<\/h2>\n      {age && <p>Age: {age}<\/p>}\n      <div>{children}<\/div> {\/* \uc5ec\uae30\uc11c children \ucd9c\ub825 *\/}\n    <\/div>\n  );\n};<\/code><\/pre>\n\n\n\n
\u2714\ufe0f children\uc744 \uc790\ub3d9\uc73c\ub85c \ud3ec\ud568\ud558\uc9c0 \uc54a\uc744 \uacbd\uc6b0 \uc544\ub798\ucc98\ub7fc \uc0ac\uc6a9 \ud560 \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4.
If you don’t want to automatically include children, you can use it like this:<\/p>\n\n\n\n
type UserCardProps = {\n  name: string;\n  age?: number;\n};\n\nfunction UserCard({ name, age }: UserCardProps) {\n  return (\n    <div>\n      <h2>{name}<\/h2>\n      {age && <p>Age: {age}<\/p>}\n    <\/div>\n  );\n}<\/code><\/pre>\n\n\n\n
\n\n\n\n
\ud83d\udc49\ud83c\udffb3. State \ud0c0\uc785 \uc9c0\uc815 + \ud568\uc218 \ud0c0\uc785 \uc9c0\uc815 (src\/App.tsx<\/code>)
State type specification + function type specification (src\/App.tsx)<\/p>\n\n\n\n
import React, { useState } from \"react\";\nimport UserCard from \".\/components\/UserCard\";\nimport type { Todo } from \".\/types\";<\/mark><\/strong>\n\n\/\/ \ud568\uc218 \ud0c0\uc785 \uc9c0\uc815: string\uc744 \ubc1b\uc544 string\uc744 \ubc18\ud658\n\/\/ Function type specification: takes a string and returns a string\nfunction greet(name: string): <\/strong>string<\/strong> <\/mark>{\n  return `Hello, ${name}!`;\n}\n\nfunction App() {\n  \/\/ State \ud0c0\uc785 \uc9c0\uc815\n\/\/ Specify State type\n  const [todos, setTodos] = <\/mark><\/strong>useState<Todo[]><\/strong><\/mark>([\n    { id: 1, text: \"Learn Vite\", completed: false },\n    { id: 2, text: \"Practice TypeScript\", completed: true },\n  ]);\n  \/\/ \ub9cc\uc57d toggleTodo(3)\uc744 \ud638\ucd9c\ud558\uba74, id\uac00 3\uc778 todo\ub97c \ucc3e\uc544\uc11c completed \uac12\uc744 \ubc18\uc804\uc2dc\ud0b5\ub2c8\ub2e4.\n  \/\/ If you call toggleTodo(3), it will find the todo with id 3 and invert its completed value.\n  const toggleTodo = (id: number) => {\n    setTodos((prev) =>\n      prev.map((todo) =>\n        todo.id === id ? { ...todo, completed: !todo.completed } : todo\n      )\n    );\n  };\n\n  return (\n    <div style={{ padding: \"20px\" }}>\n      <h3>Vite + React + TypeScript Example<\/h3>\n      <p>{greet(\"Johnny\")}<\/strong><\/mark><\/p>\n\n      <h2>User Cards<\/h2>\n      <UserCard name=\"Alice\" age={25} \/>\n      <UserCard name=\"Bob\" \/><\/strong><\/mark>\n\n      <h2>Todo List<\/h2>\n      <ul>\n        {todos.map((todo) => (\n          <li\n            key={todo.id}\n            style={{\n              textDecoration: todo.completed ? \"line-through\" : \"none\",\n              cursor: \"pointer\",\n            }<\/mark><\/strong>}\n            onClick={() => toggleTodo(todo.id)}\n          >\n            {todo.text}<\/strong><\/mark>\n          <\/li>\n        ))}\n      <\/ul>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n
\u2b50\ufe0f \uae30\uc874 \uc0c1\ud0dc\ubc18\uc804 \/ Inversion of existing state<\/p>\n\n\n\n
\u2714\ufe0fprev.map(\u2026)<\/p>\n\n\n\n
— prev<\/code>\ub294 \uc774\uc804 todos<\/code> \ubc30\uc5f4\uc785\ub2c8\ub2e4.
prev is the previous todos array.<\/p>\n\n\n\n
— map<\/code>\uc744 \uc0ac\uc6a9\ud574\uc11c \ubc30\uc5f4\uc744 \uc21c\ud68c\ud558\uba74\uc11c, id<\/code>\uac00 \uc77c\uce58\ud558\ub294 todo<\/code>\ub9cc completed<\/code> \uac12\uc744 \ubc18\uc804\uc2dc\ud0b5\ub2c8\ub2e4.
Using map, we iterate through the array and invert the completed value only for todos with matching id.<\/p>\n\n\n\n
— { ...todo, completed: !todo.completed }<\/code> \uc774 \uad6c\ubb38\uc740 \uae30\uc874 todo \uac1d\uccb4\ub97c \ubcf5\uc0ac\ud55c \ub4a4, completed<\/code> \uc18d\uc131\ub9cc \ubc18\uc804\uc2dc\ucf1c\uc11c \uc0c8\ub85c\uc6b4 \uac1d\uccb4\ub97c \ubc18\ud658\ud558\ub294 \ubc29\uc2dd\uc785\ub2c8\ub2e4.
{ \u2026todo, completed: !todo.completed } This syntax copies the existing todo object and returns a new object with only the completed property reversed.<\/p>\n\n\n\n
  const toggleTodo = (id: number) => {\n    setTodos((prev) =>\n      prev.map((todo) =>\n        todo.id === id ? { ...todo, completed: !todo.completed } : todo\n      )\n    );\n  };<\/code><\/pre>\n\n\n\n
\n\n\n\n
\ud83d\udc49\ud83c\udffb4. \uc9c4\uc785 \ud30c\uc77c (src\/main.tsx<\/code>)
Entry file (src\/main.tsx)<\/p>\n\n\n\n
import React from \"react\";\nimport ReactDOM from \"react-dom\/client\";\nimport App from \".\/App\";\nimport \".\/index.css\";\n\nReactDOM.createRoot(document.getElementById(\"root\")!).render(\n  <React.StrictMode>\n    <App \/>\n  <\/React.StrictMode>\n);\n<\/code><\/pre>\n\n\n\n
\ud83d\udc49\ud83c\udffb5.\uc2a4\ud06c\ub9b0 \uc0f7 \/ ScreenShot <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
\ud83d\udc49\ud83c\udffb \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 + \ud0c0\uc785\uc785\ub2c8\ub2e4.TypeScript is JavaScript + types. \ud83d\udc49\ud83c\udffb \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub294 \uc790\ub3d9\uc73c\ub85c \ud0c0\uc785\uc744 \ucd94\ub860 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \uae30\ub2a5\uc774 \ubd80\uc871\ud560 \uacbd\uc6b0 \uc624\ub958\uac00 \ubc1c\uc0dd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.JavaScript can automatically infer types, but if the functionality is lacking, errors can occur. \ud83d\udc49\ud83c\udffb \ud0c0\uc785\uc744 \uc0ac\uc6a9\ud568\uc73c\ub85c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \uc790\ub3d9\ucd94\ub860\uc744 \ubcf4\uc644 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.Using types can complement JavaScript’s automatic inference. \ud83d\udc49\ud83c\udffb \ud0c0\uc785\uc2a4\ud06c\ub9bd\uc5d0\uc11c […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21,1,7],"tags":[],"class_list":["post-4306","post","type-post","status-publish","format-standard","hentry","category-react","category-uncategorized","category-website","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/4306","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=4306"}],"version-history":[{"count":54,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/4306\/revisions"}],"predecessor-version":[{"id":4363,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/4306\/revisions\/4363"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=4306"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=4306"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=4306"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}