{"id":4246,"date":"2026-02-12T22:38:17","date_gmt":"2026-02-12T13:38:17","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=4246"},"modified":"2026-02-12T23:23:26","modified_gmt":"2026-02-12T14:23:26","slug":"vitereactvite-ex1","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2026\/02\/12\/vitereactvite-ex1\/","title":{"rendered":"[Vite+React]\ud398\uc774\uc9c0\uc804\ud658\/Page transition(MacOS)"},"content":{"rendered":"\n

\ud83d\udc49\ud83c\udffb React\uc758 \uae30\ub2a5\uc744 \ud45c\ud604\ud558\ub294 \ub300\ud45c\uc801\uc778 \uc608\uc81c\uc785\ub2c8\ub2e4.
This is a representative example of React’s functionality.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb\ubcf4\ud1b5 \uc6f9\uc0ac\uc774\ud2b8\ub97c \ub9cc\ub4e4\uac8c \ub418\uba74 \uc5ec\ub7ec\uac1c\uc758 \ud398\uc774\uc9c0\ub97c \ub9cc\ub4e4\uace0 \ub9c1\ud06c\ub97c \ud1b5\ud574\uc11c \ud398\uc774\uc9c0\ub97c \uc774\ub3d9\ud569\ub2c8\ub2e4.
Usually, when you create a website, you create multiple pages and move between them through links.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb\ub9ac\uc561\ud2b8\ub294 \ud398\uc774\uc9c0\ub294 \ud558\ub098\ub9cc \uc788\uace0 \ud654\uba74\uc758 \uc77c\ubd80\ub97c \uac08\uc544\ub07c\uc6b0\ub294 \ubc29\uc2dd\uc73c\ub85c \uc791\ub3d9\ud569\ub2c8\ub2e4.
React works by having only one page and replacing parts of the screen.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb \uba3c\uc800 \ub9ac\uc561\ud2b8 \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud558\uace0 \uc758\uc874\uc131\uc744 \uc124\uce58\ud569\ub2c8\ub2e4.
First, create a React project and install dependencies.<\/p>\n\n\n\n

% npm create vite@latest ReactExample2 --template react-ts\n% cd ReactExample2\n% npm install\n\n# \uc11c\ubc84 \uc2e4\ud589\n% npm run dev<\/code><\/pre>\n\n\n\n
\ud83d\udc49\ud83c\udffb \ub9ac\uc561\ud2b8 \ud504\ub85c\uc81d\ud2b8\ub97c \uc124\uce58\ud558\uba74 \ub514\ub809\ud1a0\ub9ac \uad6c\uc870\uac00 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.
When you install a React project, the directory structure is as follows.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\ud83d\udc49\ud83c\udffb \ud504\ub85c\uc81d\ud2b8 \ub514\ub809\ud1a0\ub9ac \ub0b4\uc758 main.tsx\uc5d0\uc11c index.css\ub97c \uc544\ub798\ucc98\ub7fc \uc8fc\uc11d\ucc98\ub9ac\ud569\ub2c8\ub2e4.
Comment out index.css in main.tsx inside the project directory as shown below.<\/p>\n\n\n\n
\u2714\ufe0f \ucc98\uc74c vite react\uac00 \uc2e4\ud589\ub420\ub54c \uc608\uc81c \ud398\uc774\uc9c0\uc5d0 \uc801\uc6a9\ub418\ub294 css\uc778\ub370 \uc774\uac83\ub54c\ubb38\uc5d0 \ud654\uba74 \ud06c\uae30\uc758 \uc81c\ud55c\uc774\uc0dd\uaca8\uc11c \uc6d0\ud558\ub294\ub300\ub85c \uad6c\ud604\ud558\uae30 \ud798\ub4e0\ub54c\uac00 \uc788\uc2b5\ub2c8\ub2e4.
This is the CSS applied to the example page when vite react is first run, but because of this, there are times when it is difficult to implement it as desired due to limitations in the screen size.<\/p>\n\n\n\n
import { StrictMode } from \"react\";\nimport { createRoot } from \"react-dom\/client\";\n\/\/import '.\/index.css'<\/strong>\nimport App from \".\/App.tsx\";\n\ncreateRoot(document.getElementById(\"root\")!).render(\n  <StrictMode>\n    <App \/>\n  <\/StrictMode>,\n);\n<\/code><\/pre>\n\n\n\n
\u2714\ufe0fApp.tsx\uc758 \ub0b4\uc6a9\uc744 \uc544\ub798\uc758 \ucf54\ub4dc\ub85c \ub300\uccb4\ud569\ub2c8\ub2e4.
Replace the contents of App.tsx with the code below.<\/p>\n\n\n\n
import { useState } from \"react\";\nimport \".\/App.css\";\n\ntype Page = \"home\" | \"about\" | \"contact\";\n\nfunction Home() {\n  return (\n    <div className=\"page\">\n      <h1>\ud83c\udfe0 Home<\/h1>\n      <p>\uc5ec\uae30\ub294 \uba54\uc778 \ud398\uc774\uc9c0\uc785\ub2c8\ub2e4.<\/p>\n    <\/div>\n  );\n}\n\nfunction About() {\n  return (\n    <div className=\"page\">\n      <h1>\ud83d\udcd8 About<\/h1>\n      <p>\uc774 \ud504\ub85c\uc81d\ud2b8\ub294 Vite + React SPA \uc608\uc81c\uc785\ub2c8\ub2e4.<\/p>\n    <\/div>\n  );\n}\n\nfunction Contact() {\n  return (\n    <div className=\"page\">\n      <h1>\ud83d\udcde Contact<\/h1>\n      <p>contact@example.com<\/p>\n    <\/div>\n  );\n}\n\nfunction App() {\n  const [page, setPage] = useState<Page>(\"home\");\n\n  const renderPage = () => {\n    switch (page) {\n      case \"home\":\n        return <Home \/>;\n      case \"about\":\n        return <About \/>;\n      case \"contact\":\n        return <Contact \/>;\n      default:\n        return null;\n    }\n  };\n\n  return (\n    <div className=\"container\">\n      <nav className=\"nav\">\n        <button onClick={() => setPage(\"home\")}>Home<\/button>\n        <button onClick={() => setPage(\"about\")}>About<\/button>\n        <button onClick={() => setPage(\"contact\")}>Contact<\/button>\n      <\/nav>\n\n      <div className=\"content\">{renderPage()}<\/div>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n
\u2714\ufe0f App.css\ud30c\uc77c\uc744 \ubc31\uc5c5\ud558\uace0 \uc0c8\ub85c \ub9cc\ub4e4\uac70\ub098 \uc544\ub798\uc758 \ub0b4\uc6a9\uc73c\ub85c \ub300\uccb4\ud569\ub2c8\ub2e4.
Back up your App.css file and create a new one or replace it with the content below.<\/p>\n\n\n\n
.container {\n    font-family: sans-serif;\n    text-align: center;\n    padding: 40px;\n}\n\n.nav {\n    margin-bottom: 30px;\n}\n\n.nav button {\n    margin: 0 10px;\n    padding: 10px 20px;\n    border: none;\n    background: #646cff;\n    color: white;\n    border-radius: 6px;\n    cursor: pointer;\n    font-weight: bold;\n    transition: 0.2s;\n}\n\n.nav button:hover {\n    background: #4c53d1;\n}\n\n.page {\n    padding: 40px;\n    border-radius: 12px;\n    background: #f5f5f5;\n}\n<\/code><\/pre>\n\n\n\n
\ud83d\udc49\ud83c\udffb \uc11c\ubc84 \uc2e4\ud589 \ud6c4 \ube0c\ub77c\uc6b0\uc800 \uc811\uc18d
After running the server, access the browser<\/p>\n\n\n\n
# \uc11c\ubc84\uac00 \uc2e4\ud589\ub418\uc9c0 \uc54a\uc558\uc73c\uba74 \uc2e4\ud589\ud569\ub2c8\ub2e4.\n# If the server is not running, start it.\n% npm run dev\n\n# \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uc811\uc18d\n# Access from browser\nhttp://localhost:5173\/<\/code><\/pre>\n\n\n\n
\ud83d\udc49\ud83c\udffb \uc2a4\ud06c\ub9b0\uc0f7 \/ ScreenShot<\/p>\n\n\n\n
\u2714\ufe0f \uac01 \ubc84\ud2bc\uc744 \ub204\ub974\uba74 \ub2e4\uc74c\uacfc \uac19\uc774 \ud398\uc774\uc9c0\uc774\ub3d9\ud558\uc9c0 \uc54a\uace0 \ud654\uba74\ub9cc \ubc14\ub01d\ub2c8\ub2e4.
When you press each button, the screen only changes without moving the page as follows.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
\ud83d\udc49\ud83c\udffb React\uc758 \uae30\ub2a5\uc744 \ud45c\ud604\ud558\ub294 \ub300\ud45c\uc801\uc778 \uc608\uc81c\uc785\ub2c8\ub2e4.This is a representative example of React’s functionality. \ud83d\udc49\ud83c\udffb\ubcf4\ud1b5 \uc6f9\uc0ac\uc774\ud2b8\ub97c \ub9cc\ub4e4\uac8c \ub418\uba74 \uc5ec\ub7ec\uac1c\uc758 \ud398\uc774\uc9c0\ub97c \ub9cc\ub4e4\uace0 \ub9c1\ud06c\ub97c \ud1b5\ud574\uc11c \ud398\uc774\uc9c0\ub97c \uc774\ub3d9\ud569\ub2c8\ub2e4.Usually, when you create a website, you create multiple pages and move between them through links. \ud83d\udc49\ud83c\udffb\ub9ac\uc561\ud2b8\ub294 \ud398\uc774\uc9c0\ub294 \ud558\ub098\ub9cc \uc788\uace0 \ud654\uba74\uc758 \uc77c\ubd80\ub97c \uac08\uc544\ub07c\uc6b0\ub294 \ubc29\uc2dd\uc73c\ub85c \uc791\ub3d9\ud569\ub2c8\ub2e4.React works by having only one page and […]<\/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-4246","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\/4246","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=4246"}],"version-history":[{"count":25,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/4246\/revisions"}],"predecessor-version":[{"id":4280,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/4246\/revisions\/4280"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=4246"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=4246"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=4246"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}