TC - 10번일지 (로딩 상태 관리)

18. 로딩 상태 관리

새로고침 해서 백엔드에서 데이터를 가져올때 반응은 즉각적이다. 왜냐면 지금 내 컴퓨터 하나에서 프론트와 백서버 둘 다 작업중이기 떄문이다. 그런데 실제로는 요청을 보내 이렇게 데이터를 가져오거나 저장하는 데 시간이 좀 걸리는 경우가 많다.

그래서 백엔드 코드에서 딜레이 코드를 하나 추가해봤다.

✍ app.jsx (backend project)

//중략
app.get("/posts", async (req, res) => {
  const storedPosts = await getStoredPosts();
  await new Promise((resolve, reject) => setTimeout(() => resolve(), 1500)); 
  //setTimeout 부분이 딜레이 부분.
  res.json({ posts: storedPosts });
});	

18.1. 문제 발생

새로고침해도 즉각적으로 데이터가 갱신되는게 아니라 , 기본 화면으로 돌아간 다음 1.5초 뒤에 데이터가 갱신된다.

18.2. 해결책

사용자가 기다리는 동안 로딩 표시같은걸 해줘야 한다. 빙글빙글 돌고 있는 원이라던가 하는 아래 사진같은 것들.

순서

1. PostList.jsx 에 새 상태 추가.
2. 데이터를 가져오는중인지, 포스팅이 없는 상태인지 알려주기.

1,2 번 진행

✍ PostList.jsx (frontend project)

import { useEffect, useState } from "react";

// ...중략

function PostList({ isPosting, onStopPosting }) {
  const [posts, setPosts] = useState([]);
  const [isFetchting, setIsFetching] = useState(false);

// ...중략
  return (
    <>
 /*     {isPosting && (
        <Modal onClose={onStopPosting}>
          <NewPost onCancel={onStopPosting} onAddPost={addPostHandler} />
        </Modal>
      )}*/
      
      {!isFetchting && posts.length > 0 && (
        <ul className={classes.posts}>
          {posts.map((post) => (
            <Post key={post.body} author={post.author} body={post.body} />
          ))}
        </ul>
      )}

      {!isFetchting && posts.length === 0 && (
        <div style={{ textAlign: "center", color: "white" }}>
          <h2>포스트가 없습니다.</h2>
          <p>여기에 내용을 추가해보세요 !</p>
        </div>
      )}
      
      {isFetchting && (
        <div style={{ textAlign: "center", color: "white" }}>
          <p>게시물 로딩중...</p>
        </div>
      )}
    </>
  );
}
export default PostList;

PostList에서 렌더링 하는것은

1. 포스트가 있을때 (길이가 0보다 클떄)
2. 포스트가 없을떄 (길이가 0일떄) 두개로 나뉜다. 여기에 && 연산자로 fetching 중인지 아닌지 추가해준다. fetch중이면 로딩중이라는 글자를 화면에 띄워준다. 그리고 로딩이 끝나면 포스트들이 렌더링 될것이다.

18.3 응답이 비정상적일때 예외처리

✍ PostList.jsx (frontend project)

  useEffect(() => {
    async function fetchPosts() {
      setIsFetching(true);
      const response = await fetch("http://localhost:8080/posts");
      const resData = await response.json();
      if (!response.ok) {
        <div style={{ textAlign: "center", color: "white" }}>
          <p>응답이 비정상적입니다...</p>
        </div>;
      }
      setPosts(resData.posts);
      setIsFetching(false);
    }

    fetchPosts();
  }, []);

18.4. response

위에 쓴 response.ok는 Response 객체의 속성 중 하나다

response.ok는 HTTP 응답의 상태 코드가 200 ~ 299 범위인지 아닌지를 나타내는 불리언(Boolean) 값이다. 즉, true일 경우 응답이 성공적으로 처리되었음을 나타내며, false일 경우 응답이 실패했음을 알려준다.

예를 들어, 다음과 같이 fetch() 함수로 서버로부터 데이터를 가져올 때 response.ok 값을 사용하여 응답이 성공했는지 아닌지를 확인할 수 있기 떄문에 예외처리 코드로 사용할 수 있다.