해결된 질문
24.07.19 16:56 작성
·
139
·
수정됨
0
안녕하세요 선생님
오류는 아니고 쫌 엉뚱한질문인데
다이어리 로컬스토리지 로딩 기능 구현중에
function App () {
const [IsLoading, setIsLoading]
= useState(true);
이 state가 true 이면
if (IsLoading) {
return <div>로딩 중</div>;
}
화면에 로딩중으로 렌더링 하게 코딩을 했는데
아무리 새로고침 해봐도 화면에 로딩 중 찍히는 걸
볼 수 가 없는데 이유는 너무 빨리 지나가서 제가
볼 수가 없는건가요?
그렇다면 유즈이팩트 사용 여부에따라 마운트 할 때 화면을 두번 그리게 되는건가요?
답변 3
0
2024. 07. 22. 10:29
안녕하세요 이정환입니다.
넵 .. 로딩이 너무 빨라서 그렇습니다 ㅠㅠ
로딩화면을 보고 싶으시다면 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);
};
0
2024. 07. 19. 17:19
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();
/*-----*/
인공지능님 말대로 셋타임아웃을 걸어봤는데
콘솔에서만 작동이되고 화면은 멈추지 않는데 로딩 중을
볼수있는 방법은 없는것일까요?
화면이 두번 렌더링 되는 순간을 보고싶어서....
죄송합니당 이런질문올려서...
0
안녕하세요, 인프런 AI 인턴입니다.
0401luna님의 질문에 대한 답변이 직접적으로 일치하는 내용을 찾을 수는 없습니다만, 비슷한 상황에 대한 해설을 포함한 질문이 있어 이를 참고하시면 도움이 될 것 같습니다.
다음은 로컬 스토리지에서 데이터를 로딩하는 과정에서 발생할 수 있는 이슈에 대한 해결 방안 중 하나를 제시한 내용입니다.
setTimeout
을 사용하여 상태 업데이트 지연)을 시도해 볼 수 있습니다.0401luna님의 경우, 로딩 화면이 너무 빠르게 지나가 버리는 것과 관련하여 useEffect
내에서 로딩 상태를 관리하고, 아마도 데이터 로드가 완료된 후에 setIsLoading(false)
을 호출하여 로딩 상태를 업데이트하고 있을 것입니다. 데이터 로딩을 위해 useEffect
를 사용하는 경우, 로딩 완료 후 로딩 상태를 업데이트하는 로직을 확인하여야 하며, 데이터 요청이 매우 빠르게 처리되어 사용자가 로딩 화면을 볼 수 없는 경우가 일반적입니다.
로딩 화면을 보여주는 것이 목적이라면, 테스트 목적으로 로딩 상태를 몇 초간 지속시키는 로직(setTimeout
사용 등)을 추가하여 테스트해 볼 수 있습니다.
질문에 직접적으로 해결책을 제시하는 것이 아니라, 비슷한 상황에 대한 해설을 기반으로 한 제안입니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.