리액트에서 fetch 사용하기

codeit에서 리액트로 데이터 다루기 강의를 들으며 작성한 내용입니다.

fetch

데이터를 불러올때 사용

mock.json 파일 대신 사용

1. console에 fetch(데이터경로) 입력해서 데이터 잘 불러오는지 확인
   

2. Network 탭에서 확인

   • paging 은 데이터 추가 로딩햇을 값을 담고 잇음
   • reviews 프로퍼티에는 일부 데이터가 잇음 ( mock.json 과 구조 비슷)
     

3. api.js 파일 생성
   

   • api.js

     export async function getReviews() {
         // async를 사용해서 비동기 함수
     
         const response = await fetch('경로');
         // fetch: 네트워크 리퀘스트를 보내고 데이터를 받아옴
     
         const body = await response.json();
         // response에서 json 함수를 호출하고
         // json 변환이 끝나면 body 리턴
     
         return body;
     }

4. mock.json 불러온 곳을 수정 (mock.json 이 아닌 fetch 사용)

   • mock.json 사용했을 때

     import React, { useState } from "react";
     import ReviewList from "./components/ReviewList";
     import mockItems from "./mock.json";
     
     function App() {
       const [items, setItems] = useState(mockItems);
     
       // 리스트 정렬버튼
       const [order, setOrder] = useState('createdAt');
       const sortedItems = items.sort((a,b) => b[order] - a[order]);
       const handleNewestClick = () => setOrder('createdAt');
       const handleBestClick = () => setOrder('rating');
     
       // 삭제 버튼
       const handleDelete = (id) => {
         const nextItems = items.filter((item) => item.id !== id)
         
         setItems(nextItems)
       }
     
       return (
         <div>
           <div>
             <button onClick={handleNewestClick}>최신순</button>
             <button onClick={handleBestClick}>베스트순</button>
           </div>
           <ReviewList items={sortedItems} onDelete={handleDelete}/>
         </div>
       );
     }
     
     export default App;

   1. 파일 불러오기 x
   2. [] 빈 배열 사용
   3. mock.json 파일 삭제

   import React, { useState } from "react";
   import ReviewList from "./components/ReviewList";
   // import mockItems from "./mock.json";
   
   function App() {
     const [items, setItems] = useState([]);
   
     // 리스트 정렬버튼
     const [order, setOrder] = useState('createdAt');
     const sortedItems = items.sort((a,b) => b[order] - a[order]);
     const handleNewestClick = () => setOrder('createdAt');
     const handleBestClick = () => setOrder('rating');
   
     // 삭제 버튼
     const handleDelete = (id) => {
       const nextItems = items.filter((item) => item.id !== id)
       
       setItems(nextItems)
     }
   
     // 별점 3점인것만 보이게
     const handleFilter = () => {
       const filterItems = items.filter((item) => item.rating === 3);
       setItems(filterItems)
     }
   
     return (
       <div>
         <div>
           <button onClick={handleFilter}>필터 버튼 (별점3점)</button>
           <button onClick={handleNewestClick}>최신순</button>
           <button onClick={handleBestClick}>베스트순</button>
         </div>
         <ReviewList items={sortedItems} onDelete={handleDelete}/>
       </div>
     );
   }
   
   export default App;

4-1. 네트워크에서 데이터를 받아오는 버튼 생성

import React, { useState } from "react";
import ReviewList from "./components/ReviewList";
import { getReviews } from "./api";
// import mockItems from "./mock.json";

function App() {
  const [items, setItems] = useState([]);

  // 리스트 정렬버튼
  const [order, setOrder] = useState('createdAt');
  const sortedItems = items.sort((a,b) => b[order] - a[order]);
  const handleNewestClick = () => setOrder('createdAt');
  const handleBestClick = () => setOrder('rating');

  // 삭제 버튼
  const handleDelete = (id) => {
    const nextItems = items.filter((item) => item.id !== id)
    
    setItems(nextItems)
  }

  // 별점 3점인것만 보이게
  const handleFilter = () => {
    const filterItems = items.filter((item) => item.rating === 3);
    setItems(filterItems)
  }

  // 클릭하면 네트워크에서 데이터를 받아와서 items의 state를 변경할 버튼
  const handleLoadClick = async () => {
    // handleLoadClick 이라는 비동기 함수를 만들고
    const {reviews} = await getReviews();
    // 리퀘스트를 보냄
    // reviews라는 값을 디스쳐링 
    setItems(reviews);
    // state를 변경
  }

  return (
    <div>
      <div>
        <button onClick={handleFilter}>필터 버튼 (별점3점)</button>
        <button onClick={handleNewestClick}>최신순</button>
        <button onClick={handleBestClick}>베스트순</button>
      </div>
      <ReviewList items={sortedItems} onDelete={handleDelete}/>
      <button onClick={handleLoadClick}>불러오기</button>
    </div>
  );
}

export default App;

4-2. useEffect 사용하기

useEffect를 사용하고 빈배열을 넘겨주면,
리액트는 콜백함수를 맨 처음 렌더링 할 때만 실행하기 때문에 (계속 데이터 가져오는 것을)무한 루프를 멈출 수 있다.

import React, { useEffect, useState } from "react";
import ReviewList from "./components/ReviewList";
import { getReviews } from "./api";
// import mockItems from "./mock.json";

function App() {
  const [items, setItems] = useState([]);

  // 리스트 정렬버튼
  const [order, setOrder] = useState('createdAt');
  const sortedItems = items.sort((a,b) => b[order] - a[order]);
  const handleNewestClick = () => setOrder('createdAt');
  const handleBestClick = () => setOrder('rating');

  // 삭제 버튼
  const handleDelete = (id) => {
    const nextItems = items.filter((item) => item.id !== id)
    
    setItems(nextItems)
  }

  // 별점 3점인것만 보이게
  const handleFilter = () => {
    const filterItems = items.filter((item) => item.rating === 3);
    setItems(filterItems)
  }

  // 클릭하면 네트워크에서 데이터를 받아오는 버튼 (items의 state를 변경할 버튼)
  const handleLoad = async () => {
    // handleLoadClick 이라는 비동기 함수를 만들고
    const {reviews} = await getReviews();
    // api.js에 getReviews 명 적혀있음
    // 리퀘스트를 보냄
    // reviews라는 값을 디스쳐링 
    setItems(reviews);
    // state를 변경
  }

  useEffect(()=> {
    handleLoad();
  }, []);
  // 빈배열을 넘겨주면, 리액트는 콜백함수를 맨 처음 렌더링 할 때만 실행하기 때문에 (계속 데이터 가져오는 것을)무한 루프를 멈출 수 있다.

  return (
    <div>
      <div>
        <button onClick={handleFilter}>필터 버튼 (별점3점)</button>
        <button onClick={handleNewestClick}>최신순</button>
        <button onClick={handleBestClick}>베스트순</button>
      </div>
      <ReviewList items={sortedItems} onDelete={handleDelete}/>
    </div>
  );
}

export default App;