react hydration error

문제 상황

머지된 찜 버튼을 사용하여 포스트 글 컴포넌트에 적용하엿다. 에러가 생겼다. why?

문제 원인

해당 에러에 같이 써있는 url에 접속해서 보았다.
해당 오류가 발생하는 원인에는 여러가지가 있다고 한다.

1. HTML 태그의 잘못된 중첩
   <p>다른 <p>태그 에 중첩됨
<div><p>태그 에 중첩됨
<ul>또는 태그 <ol>에 중첩됨<p>
태그 <a>에 중첩 <a>
태그 <button>에 중첩 <button>
   
2. typeof window !== 'undefined'렌더링 로직 과 같은 검사 사용
3. 렌더링 로직 window과 같은 브라우저 전용 API 사용localStorage
4. Date()렌더링 로직에서 생성자 와 같은 시간 종속 API 사용
5. 잘못 구성된 CSS-in-JS 라이브러리

문제 해결

나 같은 경우에는 button 안에 LinkButton 컴포넌트를 삽입하게 되면서 button이 중첩돼서 났다.
따라서 LinkButton을 감싸던 button을 div로 수정하였더니 말끔하게 동작~