로딩 화면 구현하기(9)

📗목차

• 로딩 화면
  • 이미지 관련 데이터 처리 성공
  • 이미지 관련 데이터 처리 실패
• 서버 Off일때
• 서버 On일 때

로딩 화면

useEffect에서 then 메서드와 catch 메서드 안을 보면 setLoading(false)을 볼 수 있다.

const [darkMode, setDarkMode] = useState(false);
const [imageData, setImageData] = useState([]); // 이미지 데이터 상태
const [loading, setLoading] = useState(true); // 데이터 로딩 상태
const navigate = useNavigate();

const onClick = useCallback(() => setDarkMode(prev => !prev))
const handleLogout = useCallback(() => navigate('/'), [])

useEffect(() => {
    axios
        .get('http://localhost/Album/src/Data/GET_db.php')
        .then(res => {
            const data = JSON.parse(JSON.stringify(res.data)); 
            //console.log(data);
            const updatedImageData = [];
            for(let i in data) {
                if(data[i].title !== '') {
                    updatedImageData.push({
                        "id": data[i].id,
                        "title": data[i].title,
                        "urlLeft": JSON.parse(data[i].urlLeft),
                        "urlRight": JSON.parse(data[i].urlRight),
                        "txt": JSON.parse(data[i].txt)
                    })
                }
            }
            setImageData(updatedImageData);
            setLoading(false); // 데이터 로딩이 완료됐음을 표시
        })
        .catch(error => {
            console.log(error);
            setLoading(false); // 데이터 로딩 실패 시도 표시
        });
}, []);

if (loading) {
    // 데이터 로딩 중일 때 표시할 내용
    return (
        <div className="loading-container">
            <div className="loading"></div>
            <div className="loading-text">loading</div>
        </div>
    )
}

then부터 말하자면,
이미지 관련 데이터를 가져오고 처리가 다 되고 나서야 setLoading이 false가 된 것이다.

catch도 말하자면,
이미지 관련 데이터를 가져오는데 실패하고 나서 setLoading이 false가 된 것이다.

이제 if(loading) 문을 살펴보자.
loading 값이 true일 때만

<div className="loading-container">
    <div className="loading"></div>
    <div className="loading-text">loading</div>
</div>

이 div태그들이 실행될 것이다.
loading의 기본값은 true이기 때문에 처음 Album 페이지에 들어왔을 때 위의 div 태그들이 실행되고 있을 것이다.

바로 이렇게 말이다.

이미지 관련 데이터 처리 성공

이미지 관련 데이터를 가져오고 처리가 다 끝나기 전까진 loading은 true인 상태이고(로딩 화면 보임), 처리가 끝나면 loading은 false가 된다.(로딩 화면 사라짐)

이미지 관련 데이터 처리 실패

이미지 관련 데이터를 가져오는데 실패한 경우도 마찬가지이다.
실패하기 전까지는 loading은 true인 상태이고(로딩 화면 보임), 실패하면 false가 된다.(로딩 화면 사라짐)

이제 다음은 이미지 관련 데이터 처리에 성공하고 나서의 렌더링 된 화면과
이미지 관련 데이터 처리에 실패하고 나서의 렌더링된 화면을 보일 것이다.

서버 Off일 때

이미지 관련 데이터 처리에 실패한 경우 렌더링된 Album 페이지

서버 On일 때

이미지 관련 데이터 처리에 성공하였을 때는 정상적으로 렌더링된 Album 페이지

기존 Album 페이지

라이트 모드

다크 모드

2023. 12. 16 글 수정

현재 Album 페이지

라이트 모드

다크 모드