{"id":4410,"date":"2026-02-17T12:48:32","date_gmt":"2026-02-17T03:48:32","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=4410"},"modified":"2026-02-20T10:06:23","modified_gmt":"2026-02-20T01:06:23","slug":"vitereactexpress-react-active","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2026\/02\/17\/vitereactexpress-react-active\/","title":{"rendered":"[Vite+React]Active,inActive button[MacOS]"},"content":{"rendered":"\n

ReactExample6<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb \uc544\ub798\ub294 \ubc84\ud2bc \ud074\ub9ad\uc2dc \ud504\ub860\ud2b8\uc5d4\ub4dc(React)\uc640 \ub370\uc774\ud130\ubca0\uc774\uc2a4 \uc0c1\ud0dc\uac00 \ubc14\ub00c\ub294 \uae30\ub2a5\uc744 \uad6c\ud604\ud55c \ucf54\ub4dc \uc785\ub2c8\ub2e4.
Below is the code that implements the function that changes the front-end (React) and database state when a button is clicked.<\/p>\n\n\n\n

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

\u2714\ufe0f Nodejs express server<\/p>\n\n\n\n

% cd ReactExample6\n% mkdir server\n% cd server\n% npm init -y\n% npm install express\n% npm install cors\n% npm install pg<\/code><\/pre>\n\n\n\n
 \u2714\ufe0f vite+react project(Frontend)<\/p>\n\n\n\n
% npm create vite@latest client --template react-ts<\/code><\/pre>\n\n\n\n
\ud83d\udc49\ud83c\udffb 1. PostgreSQL \ud14c\uc774\ube14 \uc0dd\uc131 \/ Create PostgreSQL table<\/p>\n\n\n\n
\u2714\ufe0f \uba3c\uc800 \ud130\ubbf8\ub110\uc5d0\uc11c psql<\/code>\uc5d0 \uc811\uc18d\ud55c \ub4a4, \ubc84\ud2bc\uc758 \uc0c1\ud0dc\ub97c \uc800\uc7a5\ud560 \ud14c\uc774\ube14\uc744 \ub9cc\ub4ed\ub2c8\ub2e4.
First, connect to psql in the terminal and create a table to store the button state.<\/p>\n\n\n\n
\u2714\ufe0f postgresql \uc811\uc18d  \/ postgresql connection<\/p>\n\n\n\n
% psql postgres<\/code><\/pre>\n\n\n\n
\u2714\ufe0f \ud14c\uc774\ube14 \uc0dd\uc131 \/ Create Table<\/p>\n\n\n\n
CREATE TABLE button_status (\n    id SERIAL PRIMARY KEY,\n    is_active BOOLEAN NOT NULL DEFAULT false\n);\n\n-- \ucd08\uae30 \ub370\uc774\ud130 \uc0bd\uc785 \/ Initial data insertion\nINSERT INTO button_status (is_active) VALUES (false);<\/code><\/pre>\n\n\n\n
\ud83d\udc49\ud83c\udffb2. Express \uc11c\ubc84 \uc124\uc815 (server.js<\/code>) \/ Express server setup (server.js)<\/p>\n\n\n\n
\u2714\ufe0f server \ub514\ub809\ud1a0\ub9ac \ub0b4\uc5d0 server.js\ud30c\uc77c\uc744 \ub9cc\ub4e4\uace0 \uc544\ub798\uc758 \ucf54\ub4dc\ub97c \uc785\ub825\ud569\ub2c8\ub2e4.
Create a server.js file in the server directory and enter the code below.<\/p>\n\n\n\n
\u2714\ufe0fpg<\/code> \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc640 \ud1b5\uc2e0\ud569\ub2c8\ub2e4.
Communicate with the database using the pg library.<\/p>\n\n\n\n
\u2714\ufe0f MacOS\uc5d0\uc11c postgresql \uc124\uc815\uc744 \ud558\uc9c0 \uc54a\uc740 \uacbd\uc6b0 user\ub294 \uc790\uc2e0\uc758 MacOS\uacc4\uc815\uc774\uba70 \ud328\uc2a4\uc6cc\ub4dc\ub294 \uacf5\ubc31\uc785\ub2c8\ub2e4.
If you have not configured postgresql on MacOS, user is your MacOS account and password is blank.<\/p>\n\n\n\n
const express = require('express');\nconst { Pool } = require('pg');\nconst cors = require('cors');\n\nconst app = express();\napp.use(cors());\napp.use(express.json());\n\nconst pool = new Pool({\n  user: 'yourid', \/\/ \ubcf8\uc778\uc758 \uacc4\uc815\uba85 \/ Your account name\n  host: 'localhost',\n  database: 'postgres', \/\/ \ubcf8\uc778\uc758 DB\uba85 \/ Your DB name\n  password: '', \/\/ \ubcf8\uc778\uc758 \ube44\ubc00\ubc88\ud638 \/ your password\n  port: 5432,\n});\n\n\/\/ \ud604\uc7ac \uc0c1\ud0dc \uac00\uc838\uc624\uae30 \/ Get current status\napp.get('\/status', async (req, res) => {\n  try {\n    const result = await pool.query('SELECT is_active FROM button_status WHERE id = 1');\n    res.json(result.rows[0]);\n  } catch (err) {\n    res.status(500).send(err.message);\n  }\n});\n\n\/\/ \uc0c1\ud0dc \uc5c5\ub370\uc774\ud2b8\ud558\uae30 \/ Update your status\napp.post('\/toggle', async (req, res) => {\n  const { isActive } = req.body;\n  try {\n    const result = await pool.query(\n      'UPDATE button_status SET is_active = $1 WHERE id = 1 RETURNING *',\n      [isActive]\n    );\n    res.json(result.rows[0]);\n  } catch (err) {\n    res.status(500).send(err.message);\n  }\n});\n\napp.listen(3000, () => console.log('Server running on http:\/\/localhost:3000'));<\/code><\/pre>\n\n\n\n
\u2714\ufe0f \uc11c\ubc84\uac00 \uc2e4\ud589\ub418\ub294\uc9c0 \ud655\uc778 \ud558\uae30 \/ Check if the server is running<\/p>\n\n\n\n
\u2b50\ufe0f \uc11c\ubc84\uac00 \ubc14\ub85c  \uc2e4\ud589 \uc885\ub8cc\ub418\uba74 \ud3ec\ud2b8\ubc88\ud638\ub97c \ubc14\uafb8\uc138\uc694 \uc800\ub294 5000\ubc88\uc4f0\uba74 \uc11c\ubc84\uac00 \uc2e4\ud589\uc885\ub8cc\ub418\ub124\uc694.
If the server stops running immediately, change the port number. When I use 5000, the server stops running.<\/p>\n\n\n\n
% node server.js\nServer running on http:\/\/localhost:3000<\/code><\/pre>\n\n\n\n
\ud83d\udc49\ud83c\udffb 3. Vite + React \ud504\ub860\ud2b8\uc5d4\ub4dc (App.jsx<\/code>) \/ Vite + React frontend (App.jsx)<\/p>\n\n\n\n
\u2714\ufe0f axios\ubaa8\ub4c8\uc744 \uc124\uce58\ud569\ub2c8\ub2e4.( client\/ )
Install the axios module ( client\/ )<\/p>\n\n\n\n
% npm install axios<\/code><\/pre>\n\n\n\n
\u2714\ufe0f axios<\/code>\ub97c \uc0ac\uc6a9\ud574 \uc11c\ubc84\uc640 \ud1b5\uc2e0\ud558\uba70 \ubc84\ud2bc\uc758 UI\ub97c \ubcc0\uacbd\ud569\ub2c8\ub2e4.
Communicate with the server using axios and change the UI of the button.<\/p>\n\n\n\n
import { useState, useEffect } from 'react';\nimport axios from 'axios';\n\nfunction App() {\n  const [isActive, setIsActive] = useState(false);\n\n  \/\/ \ucc98\uc74c \ub85c\ub4dc\ub420 \ub54c \uc11c\ubc84\uc5d0\uc11c \uc0c1\ud0dc \uac00\uc838\uc624\uae30\n  \/\/ Get state from server when first loaded\n  useEffect(() => {\n    axios.get('http:\/\/localhost:3000\/status')\n      .then(res => setIsActive(res.data.is_active))\n      .catch(err => console.error(err));\n  }, []);\n\n  \/\/ \ubc84\ud2bc \ud074\ub9ad \uc2dc \ud1a0\uae00 \uc694\uccad \/ Request toggle when button is clicked\n  \/\/ Request toggle when button is clicked\n  const handleToggle = async () => {\n    try {\n      const nextState = !isActive;\n      const res = await axios.post('http:\/\/localhost:3000\/toggle', { isActive: nextState });\n      setIsActive(res.data.is_active);\n    } catch (err) {\n      alert(\"\uc11c\ubc84 \uc5f0\uacb0\uc5d0 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4.\/Failed to connect to server.\");\n    }\n  };\n\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        justifyContent: \"center\", \/\/ \uc138\ub85c \uc911\uc559 \uc815\ub82c \/ Vertical center alignment\n        alignItems: \"center\", \/\/ \uac00\ub85c \uc911\uc559 \uc815\ub82c \/ horizontal center alignment\n        height: \"100vh\", \/\/ \ud654\uba74 \uc804\uccb4 \ub192\uc774 \uc0ac\uc6a9 \/ Use full screen height\n        width: \"100vw\", \/\/ \ud654\uba74 \uc804\uccb4 \ub108\ube44 \uc0ac\uc6a9 \/ Use full screen width\n        margin: 0, \/\/ \uae30\ubcf8 \uc5ec\ubc31 \uc81c\uac70 \/ Remove default margins\n      }}\n    >\n      <div style={{ textAlign: \"center\", marginTop: \"50px\" }}>\n        <h2>\n          \ud604\uc7ac \uc0c1\ud0dc\/Current Status:{\" \"}\n          {isActive ? \"\ud83d\udd35 \ud65c\uc131\/Active\" : \"\ud83d\udd34 \ube44\ud65c\uc131\/inActive\"}\n        <\/h2>\n        <button\n          onClick={handleToggle}\n          style={{\n            padding: \"10px 20px\",\n            fontSize: \"16px\",\n            backgroundColor: isActive ? \"#4CAF50\" : \"#f44336\",\n            color: \"white\",\n            border: \"none\",\n            borderRadius: \"5px\",\n            cursor: \"pointer\",\n          }}\n        >\n          {isActive ? \"\ube44\ud65c\uc131\ud654\ud558\uae30\/InActivate\" : \"\ud65c\uc131\ud654\ud558\uae30\/Activate\"}\n        <\/button>\n      <\/div>\n    <\/div>\n  );\n}\n\nexport default App;<\/code><\/pre>\n\n\n\n
\ud83d\udc49\ud83c\udffb \uc2a4\ud06c\ub9b0 \uc0f7 \/ ScreenShot<\/p>\n\n\n\n
\u2714\ufe0f InActive<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u2714\ufe0f Active<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u2714\ufe0f postgresql<\/p>\n\n\n\n
\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
ReactExample6 \ud83d\udc49\ud83c\udffb \uc544\ub798\ub294 \ubc84\ud2bc \ud074\ub9ad\uc2dc \ud504\ub860\ud2b8\uc5d4\ub4dc(React)\uc640 \ub370\uc774\ud130\ubca0\uc774\uc2a4 \uc0c1\ud0dc\uac00 \ubc14\ub00c\ub294 \uae30\ub2a5\uc744 \uad6c\ud604\ud55c \ucf54\ub4dc \uc785\ub2c8\ub2e4.Below is the code that implements the function that changes the front-end (React) and database state when a button is clicked. \ud83d\udc49\ud83c\udffb \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131 \/ Create project \u2714\ufe0f Nodejs express server  \u2714\ufe0f vite+react project(Frontend) \ud83d\udc49\ud83c\udffb 1. PostgreSQL \ud14c\uc774\ube14 \uc0dd\uc131 \/ Create PostgreSQL table […]<\/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],"tags":[],"class_list":["post-4410","post","type-post","status-publish","format-standard","hentry","category-react","category-uncategorized","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/4410","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=4410"}],"version-history":[{"count":55,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/4410\/revisions"}],"predecessor-version":[{"id":4558,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/4410\/revisions\/4558"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=4410"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=4410"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=4410"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}