Text content did not match 에러!

Text content did not match.

Server: "December 27, 2024 at 8:18:18 AM" Client: "December 27, 2024 at 8:18:19 AM" Error Component Stack

 

개발된 화면들을 확인하다가 발견한 warning 

warning이지만 새빨간 배경에 뜨는것이 아주 거슬려서 해결해보기로 한다. 

 

문제의 컴포넌트는 서버로부터 UNIX 시간을 받아와 예쁘게 가공해서 보여주는 컴포넌트였다. 

근데 이페이지가 서버사이드에서도 그려지고, 클라이어트 사이드에서도 그려지다보니, 간발의 시점차가 생기는 경우 렌더링 되는 값이 달라져 생기는 문제였다.

 

먼저 useState로 관리하고 있던 값을 Date타입에서 string으로 바꾸어주었다. 

 

기존 useState

const [castTimestamp, setCastTimestamp] = useState(new Date());

 

변경 후 useState

const [castTimestamp, setCastTimestamp] = useState(new Date());

 

그리고 나서 기존에는 그냥 리턴하는 컴포넌트에서 시간조작하던 부분을 

아래와 같이 useEffect를 써서 클라이언트 사이드 렌더링이 될때 조작하도록 수정해주었다. 

  useEffect(() => {
    // Update the timestamp when the component mounts on the client
    const timestampInMilliseconds = (detailData?.castTimestamp ?? 0) * 1000;
    setCastTimestamp(
      new Date(timestampInMilliseconds).toLocaleString("en-US", {
        timeZone: "UTC",
        year: "numeric",
        month: "long",
        day: "numeric",
        hour: "numeric",
        minute: "numeric",
        second: "numeric",
        hour12: true,
      })
    );
  }, [detailData?.castTimestamp]);

 

이렇게 세팅한 castTimestamp를 가져다 써주면 이슈해결 ~

<LabelValue label="Cast Timestamp" value={castTimestamp} />

 

 

어쩌다 보니 작년(12월말)에 쓰기 시작한 글을 올해 마쳤네..ㅋㅋ 올해는 조금 더 열심히 블로그를 써보는 것으루....

다들 새해 복 많이 받으세요~