마이페이지 버그, 정보 변경 확인 유효성 검사 🤔

Today, What I learned

튜터님의 상세한!.. 거의 전수 테스트 급의 피드백을 통해 발견한 버그..

버그 해결 과정을 기록해 본다.

 

현재 내가 작업한 마이페이지에는 이런 버그가 있다.

기존 유저 정보와 달라졌을 때만 버튼을 활성화시켜야 하는데, 유효성 검사에 그 부분을 빼먹어서..

수정했느냐의 여부에 상관없이 계속해서 서버에게 요청을 할 수 있는 상태였다!!... ((OMG))

 

이런 의미 없는 리소스 낭비를 막는 일이야말로 프론트엔드로서 해야 할 일... 😇

 

 

 

State 추가하기

해결을 위해 초기 렌더링 시 저장된 유저의 정보를 받아올 state를 하나 만들었다.

const [defaultUserInfo, setDefaultUserInfo] = useState<UserInfo>(defaultInfo);

 

좀 여러 군데에서 쓰일 것이라 코드 양을 줄이기 위해 setState 함수를 별도의 함수로 만들어주었다.

  const updateDefaultUserInfoState = useCallback((user: UserInfo) => {
    setDefaultUserInfo({
      displayName: user?.displayName,
      email: user?.email,
      photoURL: user?.photoURL,
      isJunior: user?.isJunior,
      positions: user?.positions,
      plannerStack: user?.plannerStack || [''],
      designerStack: user?.designerStack || [''],
      developerStack: user?.developerStack || [''],
    });
  }, []);

 

 

기존 state와 변경된 state 비교하기

또 기존 정보와 새롭게 수정한 정보가 같은지 확인해서 버튼을 활성화시켜야 하기 때문에 useEffect를 하나 추가했다.

 // 기존 정보에서 변경된 정보가 있을 경우에만 수정버튼 활성화
  useEffect(() => {
    if (JSON.stringify(defaultUserInfo) !== JSON.stringify(userInfo)) {
      setActiveInfoBtn(true);
    } else {
      setActiveInfoBtn(false);
    }
  }, [userInfo]);

 

두 state는 객체와 객체이기 때문에 === 연산자로 일치하는 지를 확인할 수 없다. (객체는 참조값이기 때문에)

그래서 객체값을 서로 비교할 때의 방법이 몇 가지가 있는데, 주로 문자열로 변환하여 비교한다.

 

Object.entries(obj)의 값을 tostring()으로 문자열로 바꾸어 비교하기

if (Object.entries(defaultObj).toString() !== Object.entries(currentObj).toString()) ...

 

 

JSON.stringify로 비교하기

if (JSON.stringify(defaultUserInfo) !== JSON.stringify(userInfo)) { ...

 

JSON.stringyfy()는 객체를 JSON 문자열로 변환하는 방법이다.
이 코드가 좀 더 간결하고 직관적인 것 같아 선택!

 

 

 

수정 완료 후 다시 버튼 비활성화하기

수정 완료 버튼을 눌렀을 때는 다시 기존 정보를 수정한 정보로 갱신해서 수정버튼이 비활성화되도록 수정했다.

  const handleUserInfoConfirm = () => {
       ...
    setActiveInfoBtn(false);
    updateDefaultUserInfoState(userInfo); // <<<<
  };

 

 

정상 동작

수정한 것을 보면 버튼이 이제 적절하게 활성화, 비활성화되는 것을 볼 수 있다!..

 

 

불필요한 리소스 요청을 어떻게 줄일 수 있을 것인가에 대해 추가적으로 더 고민해 봐야겠다는 생각이 든 하루.. 🤔