해결된 질문
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
도 다시 계산되어 화면이 업데이트됩니다.
감사합니다! :)
2023. 10. 10. 23:26
아하,
<NoSSR />
이 자식컴포넌트라서 리렌더링 되는거라고 이해했는데 이게 맞을까요??답변 정말 감사합니다!!!