728x90 FrontEndDevelopment2 [Error] Hydration failed because the initial UI does not match what was rendered on the server, Text content does not match server-rendered HTML - hydration 비활성화 위 에러는 일반적으로 서버 렌더링과 클라이언트 렌더링이 다르게 동작할 때 발생합니다. Hydration이란? 더보기 Hydration은 React에서 클라이언트 사이드 렌더링 시 초기 렌더링된 HTML과 클라이언트 측에서 생성된 HTML이 동일한지 비교하는 과정을 의미합니다 React는 클라이언트 사이드 렌더링 시 이전에 서버 측에서 렌더링된 HTML과 일치하는지 확인하여, 일치하지 않으면 해당 부분을 재생성합니다. React에서 hydration을 사용하면, 서버에서 렌더링된 HTML을 기반으로 클라이언트 측에서 생성된 HTML을 업데이트하므로, 초기 렌더링 시간을 단축시킬 수 있습니다. 또한, 사용자가 페이지를 로드할 때 초기 HTML을 보여줌으로써 사용자 경험을 향상시킬 수 있습니다. 하지만, Re.. 2023. 4. 7. useEffect 사용하기 import React, { useEffect } from 'react'; import { useRouter } from 'next/router'; function Example({ name }) { const router = useRouter(); useEffect(() => { // router.isReady 또는 name이 변경될 때마다 실행됩니다. console.log('router.isReady or name has changed:', router.isReady, name); // cleanup 함수를 반환할 수도 있습니다. 이 함수는 다음 실행 전에 호출됩니다. return () => { console.log('Cleaning up:', router.isReady, name); }; }, [r.. 2023. 4. 5. 이전 1 다음 728x90