[서버 배포] axios 서버와 소통하기

axios 서버와 소통하기

1. post로 서버데이터 가져오기

• index.js 서버 파일에서 json형식으로 데이터 보내기

app.post('/api/test', (req, res) => {
  res.status(200).json({ sucess: true, text: '안녕하세요' })
})

• List.js 파일에서 state로 받을 내용 return에 배치, useEffect로 post 받아오고, 성공 시 respose.data.text로 내용 받아오기

const [text, setText] = useState('')
  useEffect(() => {
    axios
      .post('/api/test')
      .then((response) => {
        // 성공 핸들링
        console.log(response)
        setText(response.data.text)
      })
      .catch((error) => {
        // 에러 핸들링

        console.log(error)
      })
  }, [])
  return (
    <div>
      <h3>{text}</h3>

2. react 파일에서 서버로 데이터 보내주기

• 데이터를 보낼 때는 body에 담아서 보내주기
• post body 입력해서 보내주기

const List = (props) => {
  let body = {
    text: 'hello',
  }
  const [text, setText] = useState('')
  useEffect(() => {
    axios
      .post('/api/test', body)
      .then((response) => {
        // 성공 핸들링
        console.log(response)
        setText(response.data.text)
      })
      .catch((error) => {
        // 에러 핸들링

        console.log(error)
      })
  }, [])

• 서버의 index.js 에서 console.log에 req.body 값 가져오기

app.post('/api/test', (req, res) => {
  console.log(req.body)
  res.status(200).json({ sucess: true, text: '안녕하세요' })
})

• 서버의 index.js 에서 express에 이미 내장된 body-parsor를 사용해주기

app.use(express.json())
app.use(express.urlencoded({ extended: true }))