Rest API , 리액트에서 REST API 구축

REST API란?

서버와 통신하는 방식 중 한가지로 http 메서드를 사용하여 데이터를 요청/전송합니다. 

기존에 많이 사용하던 SOAP API의 경우 서비스 인터페이스를 이용해 서버에 접근했다면, REST는 인터넷 식별자(URI)와 HTTP프로토콜을 이용해서 접근하는 것이 특징이며 사용법이 단순하여 높은 보안수준을 요구하는 작업이 아닐 경우 일반적으로 많이 선호되는 통신방법입니다. 

데이터 포맷은 브라우저 호환성이 좋은 JSON을 사용하며 resource, method, messgae로 구성됩니다.

 

쉽게 말하자면, REST API는 url 주소와 메서드로 CRUD 요청을 하는 것 입니다. 

클라이언트가 서버에게 요청을 보내는 유형은 크게 4가지로 나눌 수 있고, 이게 바로 CRUD 입니다.

종류	용도
GET	데이터 조회
POST	데이터 등록
PUT	데이터 수정
DELETE	데이터 삭제

 

 

 

 

---

 

JSON-SERVER 이용

JSON 서버를 이용하면 빠르고 쉽게 REST API를 구축해줍니다. (사실상 가짜 API서버이므로 실제 프로젝트 개발시에는 사용X)

 

콘솔에 아래와 같이 입력하여 설치해줍니다.

npm install -g json-server

설치를 완료했으면 json 파일을 기반으로 한 서버를 열어봅니다. 

json-server에게 json 파일을 watch 하도록 시키는 명령어입니다.

저는 아래와같이 json 파일을 생성했습니다.

{
  "days": [
    {
      "id": 1,
      "day": 1
    },
    {
      "id": 2,
      "day": 2
    },
    {
      "id": 3,
      "day": 3
    }
  ],
  "words": [
    {
      "id": 3,
      "day": 2,
      "eng": "car",
      "kor": "자동차",
      "isDone": false
    },
    {
      "id": 6,
      "day": 3,
      "eng": "pencil",
      "kor": "연필",
      "isDone": false
    },
    {
      "day": "3",
      "eng": "house",
      "kor": "집",
      "isDone": false,
      "id": 8
    },
    {
      "day": "2",
      "eng": "mouse",
      "kor": "쥐",
      "isDone": false,
      "id": 9
    },
    {
      "day": "4",
      "eng": "monkey",
      "kor": "원숭이",
      "isDone": false,
      "id": 10
    },
    {
      "day": "3",
      "eng": "apple",
      "kor": "사과",
      "isDone": false,
      "id": 12
    },
    {
      "day": "1",
      "eng": "apple",
      "kor": "사과",
      "isDone": false,
      "id": 13
    }
  ]
}

 

json-server --watch json파일위치 --port 3001

json파일위치에는 예를 들어보면 ./src/db/data.json 처럼 jsno 파일명까지 다 적어줘야 합니다. 

리액트로 이미 작업 중이면 3000번 포트가 열려있으므로 포트는 3001번으로 잡아줬습니다. (원하는 포트를 입력해주면 됩니다)

 

 

days로 접속했을때입니다.

words로 접속했을때입니다.

 

---

useEffect, fetch()로 API 호출

위에서 만든 API에서 JSON데이터를 가져와 나타내보겠습니다.

 

useFetch라는 Custom hook(직접 만든 hook : 반복되는 로직을 묶어 하나의 컴포넌트로 만들듯이 반복되는 메서드를 하나로 묶어 사용)을 만들어 여기에서 fetch를 이용해 데이터를 가져와주었습니다. 

따라서 url주소만 넘겨주면됩니다. 

import { useEffect, useState } from "react";

export default function useFetch(url)
{
    const [data, setData] = useState([]);

    useEffect(()=>{
        fetch(url)
       .then(res=>{
        return res.json()
       })
       .then(data=>{
        setData(data);
       })
    },[url]);

    return data;
}

 

위의 코드를 호출해주는 코드입니다. 여기서 url주소를 넣어주면 됩니다. 

import { Link } from "react-router-dom";
import useFetch from "../hooks/useFetch";


export default function DayList(){
       const days = useFetch("http://localhost:3001/days"); 

    return <ul className="list_day">
        {days.map((a)=>{
            return(
                <li key={a.id}>
                    <Link to={`/day/${a.day}`}>Day{a.day}</Link>
                </li>
            )
            
        })}
        
    </ul>
}

접속해서 확인해보면 데이터가 잘 나옵니다. (따로 css처리를 해주었습니다.)