React_기초다지기_하루정리(React에서 API호출)

React

---

⚑목표 : React에서 API호출하기!

• useEffect를 이용하여 컴포넌트 Mount 시점에 API를 호출하고
  해당 API의 결과값을 일기 데이터의 초기값으로 이용하기!

---

[API를 가져와 사용해보자]

const getData = async () => {
    const res = await fetch(
      "https://jsonplaceholder.typicode.com/comments"
    ).then((res) => res.json());
    console.log(res);
  };

  useEffect(() => {
    getData();
  }, []);

• API를 가져올때는 promiss를 반환하는 비동기함수를 만들어주면되고 API의 경우 fetch를 이용하면됨
• 또한 위 코드처럼 내가 가져온 API를 Mount가 되자마자 바로 실행되게하려면 useEffect를 이용하여
  두번째 파라미터를 빈배열로 두면 컴퍼넌트가 처음 랜더링할떄 콜백함수를 실행하여 가져올 수 있음

---

[일기의 리스트에 가져온 API를 초기값으로 저장해보자!]

function App() {
  const [data, setData] = useState([]); //우리는 여기에 일기 리스트를 저장할 것이기 때문에 빈배열

  const dataId = useRef(0);

  const getData = async () => {
    const res = await fetch(
      "https://jsonplaceholder.typicode.com/comments"
    ).then((res) => res.json());

    const initData = res.slice(0.2).map((it) => {
      return {
        author: it.email,
        content: it.body,
        emotion: Math.floor(Math.random() * 5) + 1,
        created_date: new Date().getTime(),
        id: dataId.current++,
      };
    });
    setData(initData);
  };

  useEffect(() => {
    getData();
  }, []);

• 가져온 API의 값들을 리스트 저장소에 초기값으로 저장하려면, Mount되는 시기에 랜더링을 해주면 된다.
  이때 useEffect를 이용해주어 API의 값을 원하는 정보로 배열을 만들어주고 이것을 새로운 상태값으로
  저장해준뒤 이 데이터를 useEffect로 불러오게 되면 Mount될 때 getDat의 콜백함수를 불러올 수 있음.