하이드레이션

useId 소개useId()는 React 18 버전에 도입된 훅으로, 노드의 트리 위치를 나타내는 고유 ID(Base32 문자열)를 반환한다. 컴포넌트 트리가 여러 자식(children)으로 분기될 때마다 ID에 추가 비트를 삽입해서 각 자식의 위치를 나타낸다.:r0: (부모 컴포넌트):r1: (자식 컴포넌트1):r2: (자식 컴포너트2)... 주로 서버 / 클라이언트에서 생성한 트리(tree) 사이의 하이드레이션(hydration) 불일치(mismatch)를 방지하기 위해 사용한다. 즉, useId가 생성한 고유한 ID를 이용해 원활한 하이드레이션을 돕는 목적인 것. 리스트의 key를 만들기 위한 목적이 아니므로 주의한다. 출력값 예시💡 : (콜론)은 querySelector 같은 CSS 셀렉터에선 ..

Next.js는 서버 사이드에서 HTML을 생성하고 클라이언트에 전달한 후, 클라이언트에선 각 요소에 이벤트 핸들러를 달아서 실행 가능하도록 만든다(이를 Hydration이라고 부름)하지만 서버 사이드에서 HTML을 생성하는 시점엔 document 객체가 존재하지 않으므로 에러가 발생하는 것. document는 DOM(객체처럼 HTML을 조작할 수 있는 모델)에 접근할 때 사용하는 객체이며, 브라우저 환경에서만 접근할 수 있다.때문에 클라이언트에서 React 컴포넌트가 마운트된 후 document 객체에 접근하도록 해야 한다. react-no-ssr 같은 라이브러리를 사용하거나 useIsMounted 같은 커스텀훅을 사용하면 위 문제를 해결할 수 있다. 💡 useIsMounted 같은 커스텀 훅은 보통..