[React]json-server 에 POST 요청하기

사용자로부터 입력을 받고 그 입력값을 컴토넌트 state에 담아서 저장해둔 다음에 데이터베이스로 업데이트되도록 POST 요청을 보내는 것을 알아보자.

데이터베이스는 간단하게 json-server 를 이용했다. json-server 관련해서는 이전에 작성한 포스트인 여기를 참고하면 된다.

const Create = () => {
  const [title, setTitle] = useState("");
  const [body, setBody] = useState("");
  const [author, setAuthor] = useState("morello");
  const [isPending, setIsPending] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    const blog = {title, body, author};

    setIsPending(true);

    fetch('http://localhost:8000/blogs/', {
      method: 'POST',
      headers: {"Content-Type": "application/json"},
      body: JSON.stringify(blog)
    }).then(() => {
      console.log('new blog added');
      setIsPending(false);
    })
  }
  ...
};  

위 코드에서 useState, setState를 사용해서 사용자의 입력값들을 Create 컴포넌트 state에 저장을 해 놓은 상태라고 가정하자.

handleSubmit은 사용자가 부라우저에서 값을 입력하고 submit 버튼을 눌렀을 때 form이 submit 되면서 실행되는 핸들러이다.

여기서 fetch를 사용하고 첫 번째 매개변수인 endpoint는 json-server가 제공하는 주소이다. POST 요청을 할 때 method, headers, body 를 각각 위와 같이 정의해주고 요청을 보낼 수 있다. 그렇게 되면 json-server의 경우 id를 자동으로 넣어줘서 json-server에서 데이터베이스 역할을 하는 ./data/db.json 파일에 해당 객체의 title, body, author 가 저장이 된다.

출처 :

• https://www.youtube.com/watch?v=EcRFYF4B3IQ