리액트 프로젝트 - 유저정보 수정

semin Ryu·2023년 12월 1일

서버로부터 프로필 정보 가져와 조회하는 기능에 이어 이번에는 서버에 저장되어있는 유저정보를 요청을 통하여 수정하는 기능을 구현해 보았습니다.

서버로 요청보내 정보 받아오기

서버에 GET 요청을 보내 email에 해당되는 유저에 대한 정보를 가져옵니다.
useState를 활용해 각 정보를 상태로 관리합니다. 이렇게 하면 사용자 정보를 수정하는 과정에서 상태를 업데이트하면서 실시간으로 변경사항을 반영할 수 있습니다.


const [nickname, setNickname] = useState();
const [phoneNumber, setPhoneNumber] = useState();
const [password, setPassword] = useState("");
const [passwordConfirm, setPasswordConfirm] = useState("");
const [image, setImage] = useState("https://via.placeholder.com/150x150");
const [previewImageSrc, setPreviewImageSrc] = useState("https://via.placeholder.com/150x150");


  useEffect( () => {
    const fetchData = async () => {
    const response = await fetch(
      '서버URL/user?email='+email,
      {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          "Authorization": `${token}`
        },
      }
    );
    const result = await response.json();
    if (response.status === 200) {
      setNickname(result.nickname);
      setPhoneNumber(result.phone);
      setImage(result.profileImage);
      setPreviewImageSrc(result.profileImage);

    } else {
      console.log("실패");
    }
  };

  fetchData();
  }, []);

가져온 정보를 활용한 입력 폼 구성

사용자 정보를 가져온 후에는 이를 활용하여 입력 폼을 구성합니다. 각 입력 항목의 기본값으로 useState에서 관리하는 상태를 설정합니다. 이렇게 하면 사용자의 현재 정보를 기본값으로 보여줄 수 있습니다.

 return (
    <form onSubmit={handleSubmit} className="user-edit">
      <Header />
      <div className="userEdit-image">
        <img src={previewImageSrc} alt="프로필 사진" />
        <label className="edit-icon">
          <FontAwesomeIcon icon={faPen} />
          <input
            type="file"
            onChange={handleImageChange}
            style={{ display: "none" }}
          />
        </label>
      </div>

      <div className="userEdit-info-container">

        <label>닉네임</label>
        <div className="userEdit-nickname">
          <input
            type="text"
            value={nickname}
            onChange={(e) => setNickname(e.target.value)}
          />
        </div>

        <label>전화번호</label>
        <div className="userEdit-phone">
          <input
            type="phoneNumber"
            value={phoneNumber}
            onChange={(e) => setPhoneNumber(e.target.value)}
          />
        </div>

        <label>비밀번호</label>
        <div className="userEdit-password">
          <input
            type="password"
            placeholder="새로운 비밀번호 입력"
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>

        <label>비밀번호 확인</label>
        <div className="userEdit-password-confirm">
          <input
            type="password"
            placeholder="비밀번호 확인"
            onChange={(e) => setPasswordConfirm(e.target.value)}
          />
        </div>
        {loginCheck && (
        <label  style={{color: "red"}}>비밀번호가 일치하지 않습니다.</label>
        )}
      </div>

      {/* submit button */}
      <EventButton type="submit" buttonText={"저장하기"} />
      <BottomNav />
    </form>
  );
};

정보수정 요청

사용자가 정보를 수정한 후 '저장하기' 버튼을 누르면, 수정된 정보를 서버에 저장하기 위해 PUT 요청을 보냅니다. 이 때, 수정된 정보는 payload에 담아서 보냅니다.

    // Create payload
    const payload = {
      email: email,
      nickname: nickname,
      phone: phoneNumber,
      password: password,
    };

    try {
      const response = await fetch(
        "서버URL/user",
        {
          method: "PUT",
          headers: {
            "Content-Type": "application/json",
            "Authorization": `${token}`
          },
          body: JSON.stringify(payload),
        }
      );
      const data = await response.json();
      if (response.status === 200) {
        // Redirect to login.html
        console.log("성공!");
      } else if (response.status === 400) {
        // Handle error
        alert(`실패`);
      }
    } catch (error) {
      console.error("오류 발생:", error);
    }

이미지 수정 요청

사용자가 프로필 이미지도 수정한 경우, 저희 백엔드 서버에서는 유저 이미지 수정을 따로 다루고 있어, 수정요청을 추가로 보내야 합니다. 서버에서는 이미지를 multipart/form-data 형식으로 받기 때문에, 이미지 파일을 FormData로 변환하여 요청을 보냅니다.
백엔드에서 구현하는 API 방식은 개발자에 따라 다를 수 있기 때문에, 해당 방식에 맞추어 HTTP 통신 요청을 보내는 것이 중요합니다. 즉, 백엔드에서 구현한 API 명세에 따라 요청을 전송하면 됩니다.

    var formData = new FormData();
        formData.append('image', image); // 이미지
      
       
        fetch('서버URL/user/image?email='+email, {
            method: 'POST',
            headers: {
                "Authorization": `${token}`
            },
            body: formData
        })
            .then(response => {
                if (response.ok) {
                    return response.json(); // JSON 형식의 응답을 파싱
                }
                throw new Error('네트워크 응답이 실패했습니다.');
            })
            .then(data => {
                alert('성공!');
            })
            .catch(error => {
                console.error(error);
            });