로컬 스토리지 로딩 관련질문

Question

안녕하세요 선생님 오류는 아니고 쫌 엉뚱한질문인데 다이어리 로컬스토리지 로딩 기능 구현중에 function App () { const [IsLoading, setIsLoading] = useState(true); 이 state가 true 이면 if (IsLoading) { return

로딩 중

; } 화면에 로딩중으로 렌더링 하게 코딩을 했는데 아무리 새로고침 해봐도 화면에 로딩 중 찍히는 걸 볼 수 가 없는데 이유는 너무 빨리 지나가서 제가 볼 수가 없는건가요? 그렇다면 유즈이팩트 사용 여부에따라 마운트 할 때 화면을 두번 그리게 되는건가요?

이정환 Winterlood · Answer

안녕하세요 이정환입니다. 넵 .. 로딩이 너무 빨라서 그렇습니다 ㅠㅠ 로딩화면을 보고 싶으시다면 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); };

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 0401luna님의 질문에 대한 답변이 직접적으로 일치하는 내용을 찾을 수는 없습니다만, 비슷한 상황에 대한 해설을 포함한 질문이 있어 이를 참고하시면 도움이 될 것 같습니다. 다음은 로컬 스토리지에서 데이터를 로딩하는 과정 에서 발생할 수 있는 이슈에 대한 해결 방안 중 하나를 제시한 내용입니다. Localstorage에 정상적으로 저장되었지만 새로고침시 로딩되지 않습니다. 이 질문에서는 로컬 스토리지에 데이터가 정상적으로 저장되고 있지만, 웹 페이지를 새로고침했을 때 기대하는 로딩 화면이나 데이터가 제대로 표시되지 않는 문제를 다룹니다. ( 원문 링크 ) 해당 질문에 대한 해결 방안으로 코드상의 오타를 수정하는 것이 제안되었습니다. 하지만 0401luna님의 경우, 로딩 상태를 화면에 표시하는 로직과 관련된 문제로 보입니다. 속도가 너무 빨라 로딩 화면을 볼 수 없는 경우, 로딩 상태의 지속 시간을 인위적으로 연장해 보는 방법(예: setTimeout 을 사용하여 상태 업데이트 지연)을 시도해 볼 수 있습니다. 0401luna님의 경우, 로딩 화면이 너무 빠르게 지나가 버리는 것과 관련하여 useEffect 내에서 로딩 상태를 관리하고, 아마도 데이터 로드가 완료된 후에 setIsLoading(false) 을 호출하여 로딩 상태를 업데이트하고 있을 것입니다. 데이터 로딩을 위해 useEffect 를 사용하는 경우, 로딩 완료 후 로딩 상태를 업데이트하는 로직을 확인하여야 하며, 데이터 요청이 매우 빠르게 처리되어 사용자가 로딩 화면을 볼 수 없는 경우가 일반적입니다. 로딩 화면을 보여주는 것이 목적이라면, 테스트 목적으로 로딩 상태를 몇 초간 지속시키는 로직( setTimeout 사용 등)을 추가하여 테스트해 볼 수 있습니다. 질문에 직접적으로 해결책을 제시하는 것이 아니라, 비슷한 상황에 대한 해설을 기반으로 한 제안입니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.