서버로부터 받은 데이터는 함부로 훼손하지 않는다.

// 기존 코드
import styled from "styled-components";
import { useQuery, useMutation } from "@tanstack/react-query"; // 서버의 상태를 관리하기 위한 react-query 라이브러리 사용
import { getMemberInfo, MemberInfoResponseDto } from "../apis/MemberApi"; //apis로부터 서버 요청을 수행하는 기능 호출
import { useState } from "react";

const ProfileInfoSet = () => {
  const [memberInfo, setMemberInfo] = useState<MemberResponseDto | null>(null);
  const [isEdit, setIsEdit] = useState<boolean>(false);

  ...
  
};

export default ProfileInfoSet;

const Wrapper = styled.div``;
const ProfileImage = styled.div``;
const ProfileInfo = styled.div``;
const IntroduceAndDesiredTeammate = styled.div``;

위 코드를 통해 하고자 하는 동작은 다음과 같았다.

1. 서버에 저장된 멤버의 정보를 요청하고, 상태변수(memberInfo)에 담는다.
2. 멤버의 정보를 조회한다.
3. edit 버튼을 누르고, 멤버의 정보를 수정한다.
4. 수정한 멤버의 정보를 상태변경함수에 전달하여, 상태변수(memberInfo)에 담는다.

기존에는 별 생각없이 상태를 업데이트 할 때, 위와 같은 코드로 동작하도록 했다.

하지만, 코드 리뷰 시간에 받은 피드백은 이와 같은 방법이 데이터의 무결성과 안정성을 해칠 우려가 있어서 별도의 상태로 관리하는 것이 좋다라는 의견이었다.

 

위의 코드에서 발생가능한 오류는 다음과 같다.

만약 다른 컴포넌트에서 해당 코드를 기능을 공유하고 있을 경우 원본 데이터와 다른 데이터의 업로드로 인해 충돌이 발생할 수 있다.
=> 해당 컴포넌트는 아주 단순한 기능을 수행하기 때문에 큰 문제가 발생하지 않겠지만 규모가 커지고 기능의 재사용성이 높아질수록 예기치 않은 오류가 발생할 수 있다.

이로 인해 다음과 같은 코드로 수정했다.

import styled from "styled-components";
import { useQuery, useMutation } from "@tanstack/react-query"; // 서버의 상태를 관리하기 위한 react-query 라이브러리 사용
import { getMemberInfo, MemberInfoResponseDto } from "../apis/MemberApi"; //apis로부터 서버 요청을 수행하는 기능 호출
import { useState } from "react";

const ProfileInfoSet = () => {
  const [memberInfo, setMemberInfo] = useState<MemberResponseDto | null>(null);
  const [isEdit, setIsEdit] = useState<boolean>(false);
  const [updateInfo, setUpdateInfo] = useState<MemberUpdateDto>({
    nickName: "",
    passoword: "",
  }); // 업데이트 정보를 별도의 상태로 관리함으로서, 서버로부터 받은 원래의 데이터를 훼손하지 않음

  ...


export default ProfileInfoSet;

const Wrapper = styled.div``;
const ProfileImage = styled.div``;
const ProfileInfo = styled.div``;
const IntroduceAndDesiredTeammate = styled.div``;