리액트 useState등 사용 방법

React로 회원정보 수정 폼 만들기 (핵심 구조)

import { useState } from "react";
import { useNavigate } from "react-router-dom";
import "@/assets/css/common/user_common.css";

function UpdateUser() {
  // 상태 관리
  const [userPw, setUserPw] = useState('');
  const [confirmUserPw, setConfirmUserPw] = useState('');
  const [userNm, setUserNm] = useState('');
  const [userEmail, setUserEmail] = useState('');
  const [userContact, setUserContact] = useState('');

  const navigate = useNavigate();

  // 폼 제출 처리
  const handleSubmit = () => {
    // 실제 API 호출 등 로직은 여기서 수행
    alert("회원정보가 수정되었습니다.");
    navigate("/app-config"); // 예시: 다른 페이지 이동
  };

  return (
    <div className="all_area">
      <header>
        <button onClick={() => navigate("/app-config")}>뒤로가기</button>
        <h1>회원정보 수정</h1>
      </header>

      <form className="join_area" onSubmit={(e) => e.preventDefault()}>
        <label>
          사용자 비밀번호
          <input type="password" placeholder="비밀번호 입력" onChange={(e) => setUserPw(e.target.value)} />
        </label>
        <label>
          비밀번호 확인
          <input type="password" placeholder="비밀번호 확인" onChange={(e) => setConfirmUserPw(e.target.value)} />
        </label>
        <label>
          사용자 이름
          <input type="text" placeholder="이름 입력" onChange={(e) => setUserNm(e.target.value)} />
        </label>
        <label>
          이메일
          <input type="email" placeholder="이메일 입력" onChange={(e) => setUserEmail(e.target.value)} />
        </label>
        <label>
          전화번호
          <input type="tel" placeholder="전화번호 입력" onChange={(e) => setUserContact(e.target.value)} />
        </label>

        <button type="button" onClick={handleSubmit}>정보수정완료</button>
      </form>
    </div>
  );
}

export default UpdateUser;

핵심 포인트

1. useState로 각 input 상태 관리
   → userPw, confirmUserPw, userNm 등

2. onChange 이벤트로 상태 업데이트
   → 입력값과 상태를 실시간으로 연결

3. handleSubmit에서 비즈니스 로직 분리
   → 실제 API 호출은 함수 안에서 처리하고, UI 로직과 분리 가능

4. React Router를 이용한 페이지 이동
   → useNavigate를 활용해 간단하게 뒤로가기/페이지 이동 처리