nextjs csr 컴포넌트

[박지율]

nextjs csr컴포넌트에서 로딩이 다 완료되었을때 실행되는 함수같은게 없나요.
처음 페이지에 들어가면 내용이 다 깨져있어서 로딩페이지부터 보이게 하려고
기본적으로 페이지에 들어갔을때 로딩창이 뜨게 하고
window.onload실행되면 로딩페이지 display를 none으로 바꿔서 로딩창을 만들었었는데요.
usestate사용하니까 갑자기 로딩창만 뜹니다... 왜그런거죠?
아니면 다른 좋은방법이 없을까요

"use client";
import LoadingPage from "../loading";
import "./style.css";
import React, { useEffect, useState } from "react";

export default async function Util({ result, answer }) {
 console.log(answer);
 const onlyone = (checkThis) => {
const checkboxes = document.getElementsByClassName("q");
for (let i = 0; i < checkboxes.length; i++) {
if (checkboxes[i] !== checkThis) {
checkboxes[i].checked = false;
 }
 }
 };

useEffect(() => {
var loading_page = document.getElementById("load");

//로딩이 완료되었다면 로딩페이지 제거
// 변수/상수 선언
const outer = document.querySelector(".outer");
const innerList = document.querySelector(".inner-list");
const inners = document.querySelectorAll(".inner");

var buttonRight = document.querySelector(".button-right");

var count = 0;
var IsitCorrect = new Object();

//다음문제 버튼을 클릭하였을시 실행되는 함수
 buttonRight.addEventListener("click", () => {
const parentComponent = document.getElementById(count);
const countCheckbox = parentComponent.querySelectorAll('input[type="checkbox"]');
let isChecked = false;

// 모든 체크박스를 반복하며 체크 상태를 확인합니다.
for (let i = 0; i < countCheckbox.length; i++) {
if (countCheckbox[i].checked) {
isChecked = true;
break; // 하나라도 체크되어 있으면 루프를 종료합니다.
 }
 }

//하나도 체크되어 있지 않다면
if (!isChecked) {
alert("체크박스를 체크하여 정답을 선택하세요!");
 }
//그렇지 않으면
else {
//다음 문제로 넘기기
currentIndex++;
currentIndex = currentIndex >= inners.length ? inners.length - 1 : currentIndex;
 innerList.style.marginLeft = `-${outer.clientWidth * currentIndex}px`;

//체크된 체크박스값 보기
const checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
const checkedValues = Array.from(checkboxes).map((checkbox) => checkbox.value);

//19번째 문제에 도달했을때, 20번째 문제의 버튼은 '제출'로 보이게 하기
if (count >= 18) {
 buttonRight.innerText = "제출";
 }
//마지막 문제까지 제출하면, api post 요청 보내기
if (count == 19) {
const quizResult = document.getElementById("result");
 quizResult.style.display = "block";
 loading_page.style.display = "none";
 }

//체크박스에 입력한 문제가 정답이라면 answer에 1을 넣고, 스코어 추가
else if (checkedValues == result[answer[count]].a) {
IsitCorrect["answer" + count] = 1;
 console.log("correct");
 console.log(IsitCorrect);
 }
//오답시 answer에 0을 넣기
else {
IsitCorrect["answer" + count] = 0;
 }
//카운트 추가
count++;
 }
 });

//문제 개수만큼 div박스 늘리기
let currentIndex = 0;

if (outer && innerList && inners) {
 inners.forEach((inner) => {
 inner.style.width = `${outer.clientWidth}px`;
 });

 innerList.style.width = `${outer.clientWidth * inners.length}px`;
 }
 }, []);
return (
<>
 <div id="result">
 <div className="white-bg">
 <h1>당신의 점수는점입니다.</h1>
 <button>닫기</button>
 </div>
 </div>

 <div className="outer">
 <div className="inner-list">
 {answer.map((a, i) => (
<div key={a} id={i}>
 <div className="inner">
 <h1 className="question">
 {i + 1}번문제) {result[a].q}
 </h1>
 <div className="contentbox">
 <div className="content">{result[a].c1}</div>
 <input
type="checkbox"
value={"1"}
className="q"
name={i}
onChange={(e) => onlyone(e.target)}
></input>
 </div>
 <div className="contentbox">
 <div className="content">{result[a].c2}</div>
 <input
type="checkbox"
value={"2"}
className="q"
name={i}
onChange={(e) => onlyone(e.target)}
></input>
 </div>
 <div className="contentbox">
 <div className="content">{result[a].c3}</div>
 <input
type="checkbox"
value={"3"}
className="q"
name={i}
onChange={(e) => onlyone(e.target)}
></input>
 </div>
 <div className="contentbox">
 <div className="content">{result[a].c4}</div>
 <input
type="checkbox"
value={"4"}
className="q"
name={i}
onChange={(e) => onlyone(e.target)}
></input>
 </div>
 <div className="contentbox">
 <div className="content">{result[a].c5}</div>
 <input
type="checkbox"
value={"5"}
className="q"
name={i}
onChange={(e) => onlyone(e.target)}
></input>
 </div>
 </div>
 </div>
 ))}
 </div>
 </div>

 <div className="button-list">
 <button className="button-right">다음문제</button>
 </div>
 </>
 );
}

[codingapple]

https://stackoverflow.com/a/74116794
document.readyState 로 로드완료 체크하고 로드완료시 로딩중UI 제거합시다 

[박지율]

감사합니다!!!

[박지율]

document.readyState로 바꿨는데 차이가 없어요 ㅠ

[박지율]

const onPageLoad = () => {
 loading.style.display = "none";
 };
 document.onreadystatechange = function () {
if (document.readyState === "complete") {
onPageLoad();
 } else {
 window.addEventListener("load", onPageLoad, false);
return () => window.removeEventListener("load", onPageLoad);
 }
 };

[codingapple]

onPageLoad 함수는 실행되는지 console.log 써보거나  loading.style.display = "none"; 실행하면 UI 안보이는거 맞는지 확인해봅시다

[박지율]

다 확인해보고 되는거도 봤는데... useState 변수의 변수변경 함수만 쓰면 갑자기 로딩창이 뜹니다...
그렇게 로딩창이 뜨면 계속 로딩만 떠서 그냥 usestate 포기하고 innertext 사용하고 해결했습니다.
왜이러는건지 도통 모르겠네요 ㅜ

[글쓴이]

글