체인의정석

✅ "use client"란?"use client"는 Next.js 13 이상에서 도입된 새로운 지시어로,그 파일(또는 컴포넌트)이 **클라이언트 컴포넌트(Client Component)**임을 명시하는 선언입니다.🔍 왜 생겼을까?Next.js 13부터는 app/ 디렉터리에서 기본적으로 모든 컴포넌트가 **서버 컴포넌트(Server Component)**로 간주됩니다.서버 컴포넌트는 HTML만 렌더링하고, 브라우저에서 JS 실행은 안 됩니다.따라서 useState, useEffect, useContext, window 등 클라이언트 전용 API를 쓸 수 없습니다.이런 클라이언트 전용 기능을 쓰려면 파일 상단에 👇"use client"이렇게 명시해줘야 클라이언트 컴포넌트로 바뀝니다. 💡 예를 들어....

Next.js에서 자주 마주치는 Hydration Error는 **SSR(Server-Side Rendering)**과 CSR(Client-Side Rendering) 사이의 차이 때문에 발생🔍 Hydration이란?Next.js는 서버에서 HTML을 먼저 렌더링한 후, 클라이언트에서 React가 해당 HTML에 이벤트 핸들러와 상태를 붙이는 과정을 "Hydration"이라고함⚠️ Hydration Error란?서버에서 렌더링된 HTML과 클라이언트에서 렌더링되는 결과가 다를 때 발생하는 오류예를 들어:const [count, setCount] = useState(Math.random());이 코드는 서버와 클라이트에서 Math.random()의 결과가 다르기 때문에, 두 버전의 DOM이 달라지고, h..