TIL 90. Error : Hydration failed because the initial UI does not match what was rendered on the server.

Hydration failed because the initial UI does not match what was rendered on the server.
위 에러가 발생하는 이유는, Hydration 과정에서 비교할 렌더 트리를 다르게 만들었기 때문이다.
초기에 View를 Pre-Rendering 했던 렌더 트리와, Hydration을 하기 위해 클라이언트에서 자바스크립트 파일을 실행한 렌더 트리의 불일치가 발생해서 Hydration을 정상적으로 실행할 수 없는 것이다.

useEffect에 에러를 발생시키는 코드를 넣는 것으로, 랜더링 된 후 실행이 되도록 하면 에러를 해결할 수 있다.

// 중략

const [isMobile, setIsMobile] = useState(false);
const [isPc, setIsPc] = useState(false);
const mobile = useMediaQuery({ maxWidth: 785 });
const pc = useMediaQuery({ minWidth: 786 });

// 중략

useEffect(() => {
	setIsMobile(mobile);
    setIsPc(pc);
}, [mobile, pc]);

에러를 발생시켰던 위 코드.
useEffect에 넣는 것으로 해결.