React 에서 JsonServer 사용 , axios로 데이터 넣기

프로젝트 : https://github.com/JEONGHWANMIN/raect-json-server

React 에서 JsonServer 사용하기

npx json-server ./data.json --port 4000

 

port 4000번으로 json 서버를 연다.

{
  "posts": [
    {
      "id": 1,
      "writer": "HwanMin",
      "title": "첫 메모 제목",
      "body": "첫 메모 내용"
    },
    {
      "writer": "json",
      "title": "hi",
      "text": "hello",
      "id": 2
    }
  ]
}

아까 처음에 json-server를 띄운 port에 posts로 데이터가 들어있는걸 볼 수 있다.

id는 자동생성 해준다.

axios 모듈을 통해서 데이터를 추가할 수 있다.

npm i axios

React Form 

import React, { useState } from 'react'
import { Link } from 'react-router-dom'
import axios from 'axios'

export default function Form() {
  const [writer , setWriter] = useState("")
  const [title , setTitle] = useState("")
  const [text , setText] = useState("")
  const onChange = (e) => {
    const {name} = e.target
    if(name === 'writer') {
      setWriter(e.target.value)
    } else if(name === 'title') {
      setTitle(e.target.value)
    } else if (name === 'text') {
      setText(e.target.value)
    }
  }
  const onSubmit = (e) => {
    e.preventDefault();
    const body = {
      writer,
      title,
      text
    }
    console.log(body);
    setWriter('')
    setTitle('')
    setText('')
    axios
      .post("http://localhost:4000/posts", body)
      .then((res) => console.log(res));
  }
  return (
    <>
      <Link to={'/'}>뒤로가기</Link>
    <form onSubmit={onSubmit}>
      <label>작성자 : </label>
      <input onChange={onChange} name="writer" type={'text'} placeholder="작성자" value={writer}/>
      <label>title : </label>
      <input onChange={onChange} name="title" type={'text'} placeholder="title" value={title}/>
      <label>내용</label>
      <textarea onChange={onChange} name='text' value={text}></textarea>
      <button type='submit'>제출</button>
    </form>
    </>
  )
}

이런식으로 데이터를 넣고 제출을 누르면 

데이터가 잘 추가된걸 볼 수 있다.