[React] React에서 API 호출하기

https://jsonplaceholder.typicode.com/
-> 원하는 Json 형식의 링크 복사

🔮 API 호출하기

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

  console.log(res);
};

// Mount 시점에 수행
useEffect(() => {
  getData();
}, []);

• async : 비동기 함수 만들기
• fetch : 링크에서 데이터를 가져온다.
• then((res) => res.json()); : 원하는 데이터인 json 값만 뽑아온다.
• useEffect() : 처음에 랜더링되면 getData()를 호출(Mount!)

🔮 받아온 데이터 활용

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

  const initData = res.slice(0, 20).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);
};

// Mount 시점에 수행
useEffect(() => {
  getData();
}, []);

• res : API를 통해서 받아온 데이터
• initData : 받아온 데이터 중 0부터 19인덱스까지 잘라서(.slice) 객체 하나씩을 가져와(.map(it)) 객체에 있는 정보를 기존의 사용하였던 author, content에 연결시켜준다(return문).

🔮 React Developer tools

npm start해서 열리는 창(MS Edge)에서 우측 상단에 : 이렇게 생긴(점 3개) 곳 클릭 -> 확장 프로그램에서 React Developer tools 다운 -> Simple Diary에서 퍼즐 같이 생긴 곳 클릭 -> 보이게 함.

📍 기능

• 검사 클릭 -> » 생긴거 클릭 -> Component 클릭
  계층 구조, state, props 등을 볼 수 있다.

• 설정 -> Highlight~ 클릭 -> 리랜더 되는 부분이 표시가 된다.