AC 03/20 React fetch,axios, 라우팅

fetch 이용

자바스크립트에서 비동기 통신이란?
참고자료: https://bo5mi.tistory.com/189

삭제구현 - 모달창 활용

<dialog></dialog>태그 활용
js에서 태그를 useRef로 선택해서 ref.current.showModal(), ref.current.close()로 모달 on/off 구현

등록 구현

https://reqres.in/ ->create api 이용

해당 비동기통신의 response 데이터에서 데이터 뽑을 때
res.data.data 구조로 뽑아야함
fetch 결과물은 json으로 변경
const resData = await response.json();

axios 이용

npm install axios

fetch, axios, promise, async, await에 대해서는 따로 자세히 공부.

fetch로 get시에는 json 파싱이 필요하지만
axios로 get시에는 json 파싱이 필요없다.

동기 async, await 방식

비동기 then, catch 방식

    await axios({
        method: "get",
        url: "https://reqres.in/api/users?page=2"
    })
    .then((res)=>{
        resData = res.data.data;
        console.log("res: ", res);
    }).catch((error)=>{
        console.log(error);
        throw new Error("목록 로딩시 발생")
    });

json 서버 설치 및 활용

npm install json-server --save
db.json src 밖에다가 생성

{
    "posts": [
      {
        "id": 1,
        "title": "json-server",
        "author": "typicode"
      }
    ],
    "comments": [
      {
        "id": 1,
        "body": "some comment",
        "postId": 1
      }
    ],
    "profile": {
      "name": "typicode"
    },
    "todos": [
      {
        "id": 1,
        "title": "Read SitePoint article",
        "complete": false
      },
      {
        "id": 2,
        "title": "Clean inbox",
        "complete": false
      },
      {
        "id": 3,
        "title": "Make restaurant reservation",
        "complete": false
      }
    ]
  }

package.json 수정

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "json-server": "json-server --port 3001 --watch db.json"
  }

npm run json-server

리액트 라우팅

개념잡기, 필요한 이유 :
https://velog.io/@kandy1002/React-Router-Dom-%EA%B0%9C%EB%85%90%EC%9E%A1%EA%B8%B0

import React from 'react';
import HomePage from './pages/Home';
import { RouterProvider, createBrowserRouter } from 'react-router-dom';

const router = createBrowserRouter([{path: "/", element: <HomePage />}])
function App(props) {
  return (
    <RouterProvider router={router}></RouterProvider>
  );
}

export default App;