axios post

import { Link } from 'react-router-dom';
import { useState } from "react";
import axios from "axios";

const memberObj = {
    id: "",
    pwd: "",
    name: "",
    addr: "",
    mail: "",
    phone: ""
};

const Setting = () => {
    const [id, setId] = useState('');
    const [pwd, setPwd] = useState('');
    const [name, setName] = useState('');
    const [addr, setAddr] = useState('');
    const [mail, setMail] = useState('');
    const [phone, setPhone] = useState('');
    const [submit, setSubmit] = useState(false);
    const [resData, setResData] = useState('');

    const onChangeId = (e) =>setId(e.target.value);
    const onChangePwd = (e) =>setPwd(e.target.value);
    const onChangeName = (e) =>setName(e.target.value);
    const onChangeAddr = (e) =>setAddr(e.target.value);
    const onChangeMail = (e) =>setMail(e.target.value);
    const onChangePhone = (e) =>{
        setPhone(e.target.value);
        isSubmit();
    }

    const isSubmit = () => {
        if(id && pwd && name && addr && mail && phone) setSubmit(true);
    }

    const onSubmit = async () => {
        memberObj.id = id;
        memberObj.pwd = pwd;
        memberObj.name = name;
        memberObj.addr = addr;
        memberObj.mail = mail;
        memberObj.phone = phone;
        console.log(memberObj);
        //let objectJson = JSON.parse(memberObj);
        try {
            const res = await axios.post("http://localhost:3000/posts", memberObj, 'application/json');
            setResData(res.data);
        
        // const res = await axios.get("http://localhost:3000/comments");
        // setResData(res.data);
        } catch (e) {
            console.log(e);
        }
    }

    return (
        <div>
            <h1>회원 정보 설정</h1>
            <Link to="/">홈으로 이동</Link>
            <br />
            <input type="text" placeholder='아이디 입력' value={id} onChange={onChangeId} />
            <br />
            <input type="password" placeholder='패스워드 입력' value={pwd} onChange={onChangePwd} />
            <br />
            <input type="text" placeholder='이름 입력' value={name} onChange={onChangeName} />
            <br />
            <input type="text" placeholder='주소 입력' value={addr} onChange={onChangeAddr} />
            <br />
            <input type="email" placeholder='메일 입력' value={mail} onChange={onChangeMail} />
            <br />
            <input type="tel" placeholder='전화 입력' value={phone} onChange={onChangePhone} />
            <br />
            {submit && <button onClick={onSubmit}>전송</button>}
            {resData && <textarea rows={7} value={JSON.stringify(resData, null, 2)} readOnly={true} />}

        </div>
    );
};
export default Setting;

서버와 통신을 위해 API 만들기

import axios from "axios";
import alarmGo from '../images/bell.png' // 테스트용
const HEADER = 'application/json';
const HEADER_IMG = 'multipart/form-data'; 
const KH_DOMAIN = "http://localhost:8100/kh_mini_ex/";

const KhApi = {
    // 로그인 기능
    userLogin: async function(id, pw) {
        const loginObj = {
            id: id,
            pwd: pw
        }
        return await axios.post(KH_DOMAIN + "LoginServlet", loginObj, HEADER);
    },
    // 회원 정보 조회
    memberInfo: async function(id) {
        const regCmd = {
            cmd : "MemberInfo",
            id : id 
        }
        return await axios.post(KH_DOMAIN + "MemberServlet", regCmd, HEADER);
    },
    // 회원 가입
    memberReg: async function(id, pwd, name, mail) {
        const memberObj = {
            id: id,
            pwd: pwd,
            name: name,
            mail: mail
        };
        return await axios.post(KH_DOMAIN + "MemberRegServlet", memberObj, HEADER);
    },
    // 회원 가입 여부 확인
    memberRegCheck: async function(id) {
        const regCheck = {
            id: id,
        }
        return await axios.post(KH_DOMAIN + "MemberCheck", regCheck, HEADER);
    },
    memberDelete: async function(id) {
        const regCheck = {
            id: id,
        }
        return await axios.post(KH_DOMAIN + "MemberDeleteServlet", regCheck, HEADER);
    },

    memberImgTrans: async function(url) {
        let frm = new FormData();
        frm.append("photo", alarmGo);
        return await axios.post(KH_DOMAIN + "ImageServlet", frm, HEADER_IMG)
    }
}

export default KhApi;