사용자로부터 입력을 받고 그 입력값을 컴토넌트 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 가 저장이 된다.