$$config title: [Project] 회원 수정하기 keywords: - IT - ... $$ # node_app.js ```js //포스트맨 - db 수정 app.patch("/members/:id", async (req, res) => { const { id } = req.params; const { 거주지, 연락처 } = req.body; const [rows] = await pool.query( ` select * from member where id =? `, [id] ); if (rows.length === 0) { res.status(404).json({ msg: "not found", }); } if (!거주지) { res.status(400).json({ msg: "거주지 required", }); } if (!연락처) { res.status(400).json({ msg: "연락처 required", }); } const [rs] = await pool.query( ` update member set 거주지 =? 연락처 =? where id=? `, [(거주지, 연락처, id)] ); const [updatedMembers] = await pool.query( ` select * from member order by id asc ` ); res.json(updatedMembers); }); ``` app.js -> 수정버튼 토글 ```js const [InsertToggle, setInsertToggle] = useState(false); const [selectedMember, setSelectedMember] = useState(null); const onInsertToggle = () => { setInsertToggle((prev) => !prev); }; const onUpdate = async (id, 거주지, 연락처) => { try { const data = await axios({ url: `http://localhost:4000/members/${id}`, method: "PATCH", data: { 거주지, 연락처, }, }); setMembers(data.data); } catch (e) { setError(e); } onInsertToggle(); }; return( {InsertToggle && ( )} ``` #rect_MemberEdit.jsx ```js import React, { useState, useEffect } from "react"; import MemberList from "./MemberList"; const MemberEdit = ({ selectedMember, onUpdate }) => { const [value, setValue] = useState(""); const onChange = (e) => { setValue(e.target.value); }; const onSubmit = (e) => { e.preventDefault(); onUpdate(selectedMember.id, value); setValue(""); }; useEffect(() => { setValue(selectedMember.거주지); }, [selectedMember]); useEffect(() => { setValue(selectedMember.연락처); }, [selectedMember]); return (

사는 곳

연락처

); }; export default MemberEdit; ``` MemberListItem.jsx ```js { onInsertToggle(); setSelectedMember((prev) => member); }} > ```