[React 1일차] Next.js에서 동적 시간 표시로 인한 하이드레이션 오류 해결

트러블 슈팅: Next.js 하이드레이션 오류

문제 상황

React 컴포넌트에서 현재 시간을 표시하는 기능을 구현했으나, 다음과 같은 오류가 발생했다
"Runtime Error: Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client."

원인 분석

오류는 SimpleComponent에서 `new Date().toLocaleTimeString()`을 직접 사용했기 때문에 발생했다. 이 코드는 실행 시점에 따라 다른 값을 생성하는데
- 서버에서 페이지를 렌더링할 때는 서버 시간 기준으로 값이 생성됨
- 브라우저에서 React가 다시 렌더링할 때는 클라이언트 시간 기준으로 다른 값이 생성됨
- 이 두 값의 불일치로 인해 하이드레이션 오류가 발생함

해결 방법

React의 useState와 useEffect 훅을 사용하여 문제를 해결했다