학생 정보 수정 시 코멘트 형식

[kmsgm]

요약

학생 정보를 수정할 때 학생 정보 코멘트 형식과 관련하여 질문드립니다.

상황

여러 학생 정보 중 이메일만 수정했을 때 코멘트에 수정된 이메일 정보만 나타낼 수 있는 방법이 있을까요?

문제 내용

주어진 스펙에서 빈 값이면 null을 보내라고 해서 수정되지 않은 정보는 다 null을 넣어놓았는데
예시 사이트처럼 코멘트가 작성되지 않는 것 같습니다...



예시로 주어진 사이트에서는 여러 학생 정보 중 이메일만 수정하면 이메일 수정 사항만 코멘트에 반영되는 것 같습니다.



제가 만든 버전은 수정된 이메일 뿐만 아니라 다른 정보 값도 null 이라고 코멘트 내용에 들어가게 됩니다.



이런 부분은 코드에서 처리해줘야 하는 부분일까요?

[woohm402]

아 저게 정확히 어떤 의미였냐면

1. 수정되지 않은 필드면 -> 보내지 말고
2. 수정된 필드면 -> 보내는데,
   1. 빈 값으로 수정됐으면 -> "" 말고 null로 보내고
   2. 아니면 값을 보내라

라는 이야기였습니다 😅 제가 봐도 애매하게 썼네요ㅠㅠ

학생의 정보를 수정한다. 모든 필드는 optional하며 수정되는 필드만 전송하면 된다. 만약 빈 값으로 수정하고 싶은 경우 ""가 아닌 null을 보내야 한다. {}를 보내면 변경사항이 없다는 뜻이므로, 400 에러를 반환한다.

라고 써야 할 것 같습니다

[kmsgm]

앗 앞으로 디스커션에 쓰기로 했던 걸 깜박했네요...ㅎㅎ

저렇게 하려면 이런식으로 두 가지 state를 만들어서 변경된 값만 담긴 edited를 post 하는 방식을 생각해봤는데
혹시 더 좋은 방법이 있을까요...?

const initialState = {
    id: null,
    name: null,
    grade: null,
    profile_img: null,
    email: null,
    phone: null,
    major: null,
    locked: false,
};

const [student, setStudent] = useState(initialState);
const [edited, setEdited] = useState();    

const onChange = (e) => {
    e.preventDefault();
    const { name, value } = e.target;

    setStudent({ ...student, [name]: value });
    setEdited({...edited, [name]: value})  // 변경된 값만 저장...?
};

[woohm402]

두 가지 state를 만드는 방식은 저도 차용했습니다만, 그 방식대로라면 전공을 frontend -> backend -> frontend 로 변경했다면 editedData에 포함되므로 변경한 걸로 처리돼서 PATCH body에 포함되겠군요

대신 아래와 같은 방식은 어떨까요? 처음 GET했을 때 값을 저장해두고, PATCH할 때 비교하는 방식입니다.

const [originalData, setOriginalData] = useState(); // 여기다가 변경 전 데이터 저장
const [editedData, setEditedData] = useState(); // 변경되는 데이터는 여기 저장

useEffect(() => {
  axios.get(url).then(res => { setOriginalData(res.data); setOriginalData(res.data); });
}. []);

const onChange = () => { 대충 editedData 꺼를 수정한다는 말 }

const onSubmit = () => { originalData와 editedData를 비교해서 값이 변했는지 판단해서 바디에 넣고 PATCH }

[woohm402]

@kmsgm 그리고 스레드 기능 활용해주시면 좋을 것 같습니다! 답글달아드린 부분 아래 스레드로 진행해주시면 감사하겠습니다

[kmsgm]

말씀해주신대로 onSubmit 함수에서 값이 변한 것만 새로운 form에 넣어주려고 했는데 form에 key와 value가 들어가지 않는 것 같습니다.
스프레드 함수를 써서 이렇게 하는게 아닌가요...? 뭐가 문제인지 모르겠어서 질문드립니다!

const [form, setForm] = useState();

if (originStudent.profile_img !== editedStudent.profile_img) {
  setForm({ ...form, profile_img: editedStudent.profile_img });
}
if (originStudent.email !== editedStudent.email) {
  setForm({ ...form, email: editedStudent.email });
}
if (originStudent.phone !== editedStudent.phone) {
  setForm({ ...form, phone: editedStudent.phone });
}
if (originStudent.major !== editedStudent.major) {
  setForm({ ...form, major: editedStudent.major });
}

console.log(form);  // { } 빈 객체 출력

[woohm402]

그 setForm을 side effect 처리가 아닌 렌더 과정에서 하신건가요..?

[woohm402]

요건 기존 질문에 대한 답변은 완료된 거고 새로운 이슈가 생기신 거기 때문에 새 질문으로 올려주세요!