React(42) 리액트 훅 - POST 방식으로 요청 보내기

통신

"영단어 새로 추가해줘" (Create)
"영단어 목록 좀 보여줘봐" (Read)
"영단어 수정 좀 해줘" (Update)
"영단어 지워줘" (Delete)

 

클라이언트는 서버에게 요청을 보낸다

이 때 API라는 체계를 이용해 클라이언트와 서버 간에 요청과 응답을 주고 받는다.

이 때 CRUD 방식을 사용한다.

 

CRUD

클라이언트가 서버에게 요청을 보낼 때 이 요청들을 크게 4가지 성격으로 분류할 수 있다.

CRUD라고 불리는 이 4가지 대표적인 요청에 대해 살펴보자.

Create = POST

create는 서버에 정보를 올려달라는 요청이다. ( 생성 )

create는 POST 메서드를 사용해 해당 URI를 요청하면 리소스를 생성한다.

Read = GET

read는 서버에서 정보를 불러오는 요청이다. ( 읽기 ) 

read는 GET 메서드를 사용해 리소스를 조회합니다. 리소스를 조회하고 해당 도큐먼트에 대한 자세한 정보를 가지고 온다.

Update = PUT

update는 정보를 바꾸는 요청이다. ( 수정 ) 

update는 PUT 은 데이터 전체를 바꾸고 싶을 때, PATCH는 데이터의 일부만 수정하고 싶을 때 사용한다.

Delete = DETELE

delete는 정보를 지우는 요청이다. ( 삭제 )

delete는 DELETE 메서드를 사용해 리소스를 삭제할 수 있다.

 

---

 

React(42) 리액트 훅 - POST 방식으로 요청 보내기

 

자, post 방식으로 통신한 예제를 살펴보자.

날짜별 영단어 암기장의 [ DAY 추가 ] 와 [ 단어 추가 ] 기능을 활성화 시킬 것이다.

 

 

미리보는 실행화면

- DAY 추가

day추가 버튼을 누르면 일수가 day가 하루 더 늘어난다.

 

- 단어 추가

단어추가 버튼을 누르고 입력한 뒤 저장 버튼을 누르면 저장된다.

 

Header.js

Link 태그에는 to="" 옵션으로 라우팅 경로를 지정해준다. 

그러면 각가 버튼을 각각 눌렀을 때 추가 페이지로 넘어가게 된다.

import { Link } from "react-router-dom";

export default function Header() {
  return (
    <div className="header">
      <h1>
        <Link to="/">토익 영단어(고급)</Link>
      </h1>
      <div className="menu">
        <Link to="/create_word" className="link">
          단어 추가
        </Link>
        <Link to="/create_day" className="link">
          Day 추가
        </Link>
      </div>
    </div>
  );
}

 

CreateDay.js

DAY추가를 눌렀을 때 라우팅으로 넘어오는 페이지이다.

페이지 내의 [day 추가] 버튼을 한번 더 누르면, 

addDay() 함수가 실행되고 fetch()를 통해 서버에 추가할 데이터를 전달한다.

성공하면 '생성이 완료되었다는' 알림창이 뜨게 된다. 

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

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

  function addDay() {
    fetch(`http://localhost:3001/days/`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        day: days.length + 1
      }),
    }).then(res => {
      if(res.ok) {
        alert("생성이 완료되었습니다.")
        history.push(`/`);
      }
    })
  }
  return (
    <div>
      <h3>현재 일수 : {days.length}</h3>
      <button onClick={addDay}>Day 추가</button>
    </div>
  )
}

 

CreateWord.js

단어 추가를 눌렀을 때 라우팅으로 넘어오는 페이지이다.

암기할 영단어 정보를 입력한 뒤, 저장버튼을 누르면,

onSubmit() 함수가 실행되며 fetch() 를 통해 서버에 입력한 데이터를 보내준다.

성공하면 '생성이 완료되었다는' 알림창이 뜨게 된다. 

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

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

  function onSubmit(e) {
    e.preventDefault();
  
    fetch("http://localhost:3001/words", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        day: dayRef.current.value,
        eng: engRef.current.value,
        kor: korRef.current.value,
        isDone: false
      }),
    }).then((res) => {
      if(res.ok){
        alert("생성이 완료 되었습니다.");
        history.push(`/day/${dayRef.current.value}`)

      }
    });
  }
  
  const engRef = useRef(null)
  const korRef = useRef(null);
  const dayRef = useRef(null);

  return (
    <form>
      <div className="input_area">
        <label>Eng</label>
        <input type="text" placeholder="computer" ref={engRef}/>
      </div>
      <div className="input_area">
        <label>Kor</label>
        <input type="text" placeholder="컴퓨터" ref={korRef}/>
      </div>
      <div className="input_area">
        <label>Day</label>
        <select ref={dayRef}>
          {days.map(day => (
            <option value={day.day} key={day.id}>
              {day.day}
            </option>
          ))}
        </select>
      </div>
      <button onClick={onSubmit}>저장</button>
    </form>
  );
}

 

ref : https://velog.io/@pock11/REST-API-CRUD