시작하기 전에

이것도 매우 중요하고 간단하지만 주의를 기울이면 사용 방법을 이해할 수 있습니다.

이것을 이해하려면 약간의 반응 지식이 필요합니다.

먼저 다운로드

npm i axios

악시오스란 무엇인가?

axios는 브라우저에서 HTTP 요청을 만드는 데 도움이 되는 라이브러리입니다.

약속 기반 라이브러리입니다.

브라우저에서 HTTP 요청을 만드는 데 도움이 되는 도구입니다.

API에서 데이터를 가져오는 가장 간단한 방법이므로 사용하겠습니다.

NextJS 및 가져오기

NextJS에서는 가져오기 API를 사용하여 API에서 데이터를 가져옵니다.
그러나 서버 측 렌더링에서는 구성 요소의 데이터를 직접 사용할 수 없으며 useState 및 useEffect로 상태를 관리해야 합니다.

갑시다 ?

먼저 api의 URL을 얻은 다음 저장하십시오.

  const url = "https://catfact.ninja/fact";

그런 다음 api에서 데이터 가져오기를 시작하겠습니다.(YOU HAVE TO INSTALL AXIOS 😬 !!)

##  fetch data
 // fetch data .
  function getData() {
    axios
      .get(url)
      .then((res) => {
       //put the resulted data in the console for testing purposes
        console.log(res.data);
        setRepo(res.data);
      })
      //handle the error
      .catch((err) => {
        console.log(err);
      });
  }

이제 콘솔(클린트)에 데이터가 있습니다. 이제 어떻게 구성 요소 안에 넣을 수 있습니까??!

구성 요소에 넣으십시오.

5초마다 사실을 표시하는 페이지를 내장했다고 가정해 보겠습니다. 어떻게 그렇게 할 수 있습니까?

다음은 우리가 수행할 작업의 예입니다GO THERE !.

좋았어 하? 😏

어쨌든 우리는 이것을 정확히 할 것이지만 논리적인 부분은 여기GO THERE !에서 전체 저장소를 볼 수 있습니다.

이것은 빈 구성 요소입니다

  export default function Home() {


       return (
       <div>
           <h1></h1>
       </div>
       );
   };

데이터를 관리할 상태를 만듭니다.

- we will use the useState hook to manage the data.
- we will use the useEffect hook to manage the status.
- why tho ? cuz it's a server side rendering you can't handle a client side operations there .
or you will face errors like :

 ```
 Hydration failed because the initial UI does not match what was rendered on the server.
 ```

또는

Text content does not match server-rendered HTML.

상태를 알고 있어야 합니다.

useEffect(() => {
    let interval = setInterval(() => {
      getData();
      setLoading(!loading);
      setDot(dota);
      setEmoji(emojia);
    }, 5000);

여기서는 간격을 사용하여 5초마다 데이터를 가져왔습니다.
상태를 업데이트하고 반환하려는 모든 함수를 넣습니다.(하지만 아직 반환되지 않음)

기능

// to get a rendom number of dots
 function dot() {
    return dots[Math.floor(Math.random() * dots.length)];
  }
  // to get a rendom number of emojis
    function emoji() {
    return emojiArray[Math.floor((Math.random() * emoji.length) / 2)];
  }
  // and we have setLoading state to display a simple text when the data is not loaded yet.
  // and of course we have getData .(the data itself)

그래서 모두 합치면 결과를 얻을 수 있습니다 😍 .

이제 당신이 원하는 것을 위해 😏

소스 코드

여기서 보실 수 있습니다 GO THERE ! .

별점 부탁드려요
또는 이것을 복사하십시오 :

import styles from "../styles/Home.module.css";
import axios from "axios";
import { useState, useEffect } from "react";

export default function Home() {
  let [repo, setRepo] = useState([]);
  let [loading, setLoading] = useState(true);
  let [dota, setDot] = useState([]);
  let [emojia, setEmoji] = useState([]);

  const url = "https://catfact.ninja/fact";
  // fetch data .
  function getData() {
    axios
      .get(url)
      .then((res) => {
        console.log(res.data);
        setRepo(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  }
  function dot() {
    return dots[Math.floor(Math.random() * dots.length)];
  }
  function emoji() {
    return emojiArray[Math.floor((Math.random() * emoji.length) / 2)];
  }
  // put it inside useEffect hook .
  useEffect(() => {
    let interval = setInterval(() => {
      getData();
      setLoading(!loading);
      setDot(dota);
      setEmoji(emojia);
    }, 5000);

    return () => clearInterval(interval);
  }, [loading]);

  const emojiArray = [
    "😍",
    "🥰",
    "😘",
    "😗",
    "😙",
    "😚",
    "😋",
    "😛",
    "😝",
    "😜",
    "🤪",
    "😏",
    "😒",
    "😞",
    "😔",
    "😟",
    "😕",
    "🙁",
    "☹️",
    "😖",
    "😫",
    "😩",
    "🥺",
    "😢",
    "😭",
    "😤",
    "😠",
    "😡",
    "🤬",
    "🤯",
    "😳",
    "🥵",
    "🥶",
    "😱",
    "😨",
    "😰",
    "😥",
    "😓",
    "🤗",
    "🤔",
    "🤭",
    "🤫",
    "🤥",
    "😶",
    "😐",
    "😑",
    "😬",
  ];
  const dots = ["...", "..", "."];
  return (
    <div data-reactroot='' className={styles.text}>
      <h3 className={styles.h3}>Featched Data {emoji()}</h3>
      <h1>New fact every 5 sec </h1>

      <h4>{!repo.fact ? "loading ..." : repo.fact}</h4>

      <h6 style={{ color: "#F0F8FF", fontSize: "15px" }}>
        {repo.fact ? "Loading new one  " : ""}
        {dot()}
      </h6>
    </div>
  );
}

멋진 하루 되세요 🥰 .