스피너 기능 추가

 

 

React axios를 활용하여 api를 호출하면 자바스크립트의 ajax처럼 서버와 비동기 통신을 하는데

데이터를 주고 받는 과정에서 딜레이 시간이 생깁니다.

 

자연스러운 페이지 이동을 위해서 찾아보니

스피너라는 기능을 추가하면 좀더 비동기 통신 딜레이시간을 자연스럽게 보여줄 수 있다고 합니다.

 

state훅을 하나 만들어서  초기 상태는 false로 주고 통신이 완료되었을 때 setLoaded에 true 값을 줘서 스피너창이 사라지게 작업합니다.

삼 항 연산자를 활용하여 통신 이후 loaded값이 true 일 때
페이지 보여주고 false 일 때는 스피너 렌더 시켜줍니다.

 

 

client 코드

 

  const PostArea = () => {

    const [postDetil, setPostDetail] = useState({});

    const [loaded, setLoaded] = useState(false);

 

    const params = useParams();

 

    useEffect(() => {

      // console.log(params.postNum); //post id값 ex)1

      let body = {

        postNum: params.postNum,

      };

      axios

        .post("/api/post/detail", body)

        .then((res) => {

          if (res.data.success) {

            setPostDetail(res.data.post);

            setLoaded(true);

          }

        })

        .catch((err) => {

          console.log(err);

        });

    }, []);

    //646316440e622de48d***** 이런식으로 정상으로 나옴

    // console.log(postDetil._id);

    return (

      <div>

        {loaded ? (

          <>

            <Detail postDetil={postDetil} />

            <RepleArea postId={postDetil._id} />

          </>

        ) : (

          <Loading />

        )}

      </div>

    );

  };

 

 

 

참조

https://anerim.tistory.com/221

[리액트 React] 리액트 로딩화면(스피너) 추가하기 / api 호출 시 로딩화면(스피너) 넣기