인프런 커뮤니티 질문&답변

google_user님의 프로필 이미지

작성한 질문수

Next.js 시작하기(feat. 지도 서비스 개발)

CSR

dynamic에 대한 질문

해결된 질문

23.10.10 09:05 작성

·

310

1

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초가 지나고 랜덤값이 바뀔 때, 같이 바뀝니다.

답변 1

1

박용주님의 프로필 이미지
박용주
지식공유자

2023. 10. 10. 23:04

안녕하세요. 질문 감사합니다ㅎㅎ

결론부터 말하자면 React의 리렌더링 조건에 의해 발생하는 현상입니다.

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

위의 코드는 부모 컴포넌트입니다. setTimeout에서 주기적으로 컴포넌트의 상태(data)를 업데이트합니다(즉, 부모 컴포넌트가 리렌더링 됨). 그리고 React는 부모 컴포넌트가 렌더링되면 자식 컴포넌트도 리렌더링합니다. -> 자식 컴포넌트가 리렌더링되기 때문에 window.innerWidth도 다시 계산되어 화면이 업데이트됩니다.

감사합니다! :)

google_user님의 프로필 이미지
google_user
질문자

2023. 10. 10. 23:26

아하, <NoSSR />이 자식컴포넌트라서 리렌더링 되는거라고 이해했는데 이게 맞을까요??
답변 정말 감사합니다!!!

박용주님의 프로필 이미지
박용주
지식공유자

2023. 10. 10. 23:27

넵 맞습니다. 감사합니다ㅎㅎ