dynamic에 대한 질문

NoSSR도 useEffect와 같이 실행되는 건가요?

선생님 안녕하세요. 좋은강의 너무 잘 듣고있습니다. 감사합니다.

윈도우 크기를 변경했을 때, width의 값이 같이 변경되는게 신기해서 질문드립니다.

useEffect안의 math.random()의 값이 변경되는 타이밍에 window의 width값도 같이 변경되더라구요.

제 생각에는, 랜덤값이야 useEffect안에서 setData를 통해 계속 바꿔주고 있으니 변경되는게 맞다고 생각했지만, window값은 처음 값을 받아오면 새로고침을 해주기 전까지는 값이 변경되지 않을줄 알았거든요. 그런데 랜덤값이 변경될 때 값이 같이 변경되더라구요.

그래서 혹시 이게 dynamic이 useEffect와 같은 역할을 한다면, window크기를 변경할 때마다 width의 값이 바로바로 바껴야 할 텐데, 그건 또 아니고 랜덤값이 바뀔때 같이 바뀌니까, 이게 어떤식으로 실행되는건지 알고싶어서 질문드립니다.

import { NextPage } from "next";
import dynamic from "next/dynamic";
import { useEffect, useState } from "react";
// import NoSSR from "@/components/section1/NoSSR";
const NoSSR = dynamic(() => import("@/components/section1/NoSSR"), {
  ssr: false,
});

const Example: NextPage = () => {
  const [data, setData] = useState(0);

  useEffect(() => {
    const delayInSeconds = 10;
    new Promise<number>((resolve) =>
      setTimeout(() => resolve(Math.random()), delayInSeconds * 1000)
    ).then((result) => setData(result));

    console.log("NoSSR : ", NoSSR);
  });

  return (
    <main>
      <h1>Client - Side data fetching</h1>
      <p>값 : {data}</p>
      <NoSSR />
    </main>
  );
};

export default Example;

위 코드는 강의 보면서 따라치고, 궁금해서 로그를 찍어본 코드입니다. 딜레이를 10초로 주고, 그 안에서 윈도우 크기를 계속 바꿔봤는데, 윈도우 크기를 바꾼다고 해서 바로바로 변경되는 게 아니라, 10초가 지나고 랜덤값이 바뀔 때, 같이 바뀝니다.

const [data, setData] = useState(0);
...
new Promise<number>((resolve) =>
  setTimeout(() => resolve(Math.random()), delayInSeconds * 1000)
).then((result) => setData(result));
...
<main>
  ...
  <NoSSR />
</main>