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

안녕하세요 이정환입니다.

넵 .. 로딩이 너무 빨라서 그렇습니다 ㅠㅠ

로딩화면을 보고 싶으시다면 LocalStorage로 부터 데이터를 불러오는 함수에

setData 메서드를 호출하기 전에 setTimeout 함수를 사용해 딜레이를 걸어주시면 됩니다.

구체적으로 말씀드리자면

우선 다음과 같은 딜레이 함수를 만들어주신 다음에

export async function delay(ms: number) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("");
    }, ms);
  });
}

해당 함수를 다음과 같이 호출해 주시면 됩니다!

useEffect(() => {
  init(); // useEffect 내에서 await을 사용할 수 없으므로 init 이라는 별도의 함수로 분리
}, []);


const init = async () => {
  await delay(3000); // 3초간 정지

  const storedData = localStorage.getItem("diary");
  if (!storedData) {
    setIsLoading(false);
    return;
  }

  const parsedData = JSON.parse(storedData);
  if (!Array.isArray(parsedData)) {
    setIsLoading(false);
    return;
  }

  let maxId = 0;
  parsedData.forEach((item) => {
    if (Number(item.id) > maxId) {
      maxId = item.id;
    }
  });

  idRef.current = maxId + 1;

  dispatch({
    type: "INIT",
    data: parsedData,
  });
  setIsLoading(false);
};

App.jax

function App() {
  const [IsLoading, setIsLoading] 
= useState(true);

  const [data, dispatch] 
= useReducer(reducer, []);

/*-----*/
  async function First() {
    console.log("First");
    await Second();
  }

  async function Second() {
    setTimeout(() => {
      console.log("Second");
    }, 5000);
  }
  First();
/*-----*/

인공지능님 말대로 셋타임아웃을 걸어봤는데

콘솔에서만 작동이되고 화면은 멈추지 않는데 로딩 중을

볼수있는 방법은 없는것일까요?

화면이 두번 렌더링 되는 순간을 보고싶어서....

죄송합니당 이런질문올려서...

안녕하세요, 인프런 AI 인턴입니다.

0401luna님의 질문에 대한 답변이 직접적으로 일치하는 내용을 찾을 수는 없습니다만, 비슷한 상황에 대한 해설을 포함한 질문이 있어 이를 참고하시면 도움이 될 것 같습니다.

다음은 로컬 스토리지에서 데이터를 로딩하는 과정에서 발생할 수 있는 이슈에 대한 해결 방안 중 하나를 제시한 내용입니다.

• Localstorage에 정상적으로 저장되었지만 새로고침시 로딩되지 않습니다.
  
  • 이 질문에서는 로컬 스토리지에 데이터가 정상적으로 저장되고 있지만, 웹 페이지를 새로고침했을 때 기대하는 로딩 화면이나 데이터가 제대로 표시되지 않는 문제를 다룹니다. (원문 링크)
    
  • 해당 질문에 대한 해결 방안으로 코드상의 오타를 수정하는 것이 제안되었습니다. 하지만 0401luna님의 경우, 로딩 상태를 화면에 표시하는 로직과 관련된 문제로 보입니다. 속도가 너무 빨라 로딩 화면을 볼 수 없는 경우, 로딩 상태의 지속 시간을 인위적으로 연장해 보는 방법(예: setTimeout을 사용하여 상태 업데이트 지연)을 시도해 볼 수 있습니다.
    

0401luna님의 경우, 로딩 화면이 너무 빠르게 지나가 버리는 것과 관련하여 useEffect 내에서 로딩 상태를 관리하고, 아마도 데이터 로드가 완료된 후에 setIsLoading(false)을 호출하여 로딩 상태를 업데이트하고 있을 것입니다. 데이터 로딩을 위해 useEffect를 사용하는 경우, 로딩 완료 후 로딩 상태를 업데이트하는 로직을 확인하여야 하며, 데이터 요청이 매우 빠르게 처리되어 사용자가 로딩 화면을 볼 수 없는 경우가 일반적입니다.

로딩 화면을 보여주는 것이 목적이라면, 테스트 목적으로 로딩 상태를 몇 초간 지속시키는 로직(setTimeout 사용 등)을 추가하여 테스트해 볼 수 있습니다.

질문에 직접적으로 해결책을 제시하는 것이 아니라, 비슷한 상황에 대한 해설을 기반으로 한 제안입니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.

현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.