[React 문제 노트] 최신값 참조하기

이런 허접한 회원정보 화면이 있다고 쳐봅시다.

유저는 이름을 변경 할 수 있고, 인증 을 할 수 있습니다
인증 작업은 서버에서 동작하며, 시간이 1분정도 걸립니다.

인증을 수행하는 코드는 다음과 같습니다.

const useVerifyUser = () => {
  const me = useMe();
  
  return async () => {
    if (me.status === 'NOT_VERIFIED') {
      await verifyThatMayTakeUpToOneMinute();
      
      toast(`${me.name}님 인증이 완료되었습니다.`);
    }
  };
};

const useMe = () => useQuery('me', () => fetchMe());

위 코드는 간단하지만 문제가 있습니다.

• 같은 화면에서 유저는 이름을 변경할 수 있습니다.
• 인증하기 버튼을 누르고 이름변경 을 수행하는것은 충분히 가능한 동작입니다.
• 이 경우, toast(${me.name}) 에서 출력하는 이름은 변경된 이름이 아니라 인증하기 버튼을 누르기 이전 이름이 표시됩니다.

좀 더 정확한 이해를 위해서, 아래 코드는 이 문제를 해결하는 가장 간단한 솔루션입니다.

const useVerifyUser = () => {
  return async () => {
    let me = await fetchMe();
    if (me.status === 'NOT_VERIFIED') {
      await verifyThatMayTakeUpToOneMinute();
      
      me = await fetchMe();
      toast(`${me.name}님 인증이 완료되었습니다.`);
    }
  };
};

하지만 우리는 여전히 useQuery 방식의 useMe 를 사용하고 싶습니다.

선언형 인터페이스를 유지하면서 위 코드를 정상 동작할수 있도록 수정해보세요.