CSS 구성 의도
- 평소에는 div 태그로 보이다가 내용이 수정될 수 있도록 input 태그로 변경
-> state로 edit 모드 변경- input 태그 외의 요소를 클릭하면 서버로 수정된 내역이 전송되어 update 되도록 구성
문제 발생
1. PATCH 요청의 응답 200이어도 서버 DB 변경 안됨
: 첫번째는 단순하게 오타 오류였다. 200 응답이 와서 cors나 필요한 header를 추가 안했는줄 알았는데, "Contents-Type": "application/json" 의 s. "Content-Type" 으로 변경하여 해결했다. 이런 경우에도 성공 응답을 받아서 당황했다.
2. 화면 표시가 안됨
: 우선 서버에 반영이 안되어서 새로고침 명령을 추가하는게 의미가 없는것 같았다. state는 위의 사진처럼 남아있는 걸 보고 state가 변경되면 리렌더링을 발생하도록 useEffect 의존성 배열에 해당 state를 추가했더니 무한로딩이 발생했다.
해결1. 서버 요청 로직 수정
onChange->onSubmit혹은onBlur이벤트로 변경하여 fetch 요청 전달
onChange 에 fetch 요청을 하였더니 한글자 바뀔 때마다 통신과 새로고침이 반복되어 불편했다. 그래서 onBlur 에서 서버 요청을 보내고 setEditMode()로 state를 변경해줬다.
하지만 조언을 구했을 때, 버튼 클릭으로 수정이 되는 것이 UX 적으로 더 좋다는 이야기를 해주셔서 우선 onBlur 이벤트를 제거하고 버튼을 통해 통신이 이뤄지게 로직을 변경했다.
해결2. 통신 완료 후 새로고침 적용
useEffect 의존성 배열에 의해 리렌더링 대신 윈도우 새로고침 명령을 추가하여 해결했다.
.then(() => {
setEditMode(false);
window.location.reload();
}요약
- 텍스트 수정을 위해 onChange에 fetch 요청을 지양한다.
