AJAX, [ssr,csr 간단 차이점]

html을 서버가 만들면 server-side rendering

1. DB에서 데이터 뽑아서

2. 글목록.html 파일에 꽂아넣고

3. 그 html 파일을 서버에서 보내주는 것임 

html을 리액트가 만들면 client-side rendering

1. 리액트가 서버에 GET요청으로 DB데이터를 가져와서

2. 그걸 html로 만들어서 보여주는 것임 

 리액트를 쓰는 경우 보통 client-side rendering을 합니다.

1.DB에 있는 상품목록을 가져와서 리액트에서 보여주고 싶으면

 

1. 서버는 누군가 /product로 GET요청을 하면 DB에서 데이터 꺼내서 보내주라고 API를 짜놓습니다. 
2. 리액트는 상품목록을 보여주고 싶을 때 서버 /product 주소로 GET요청 날리면 됩니다.
3. 그럼 데이터 받아오겠죠? 그걸 가지고 html에 집어넣든 맘대로 개발하면 됩니다. 

 

주소창 <= get요청하는곳
get/post 요청시 새로고침됌

그럼이게 싫다 
그러면
ajax사용하면 새로고침 없이도 get/post 요청가능
ajax사용해도 GET요청가능

  axios.get('url')

서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는
간단한 브라우저 기능을 AJAX라고 합니다. 
그거 쓰면 새로고침 없이도 쇼핑몰 상품을 더 가져올 수도 있고

새로고침 없이도 댓글을 서버로 전송할 수도 있고 

 

 

import axios from 'axios'

function App(){
  return (
    <button onClick={()=>{
      axios.get('https://codingapple1.github.io/shop/data2.json').then((결과)=>{
        console.log(결과.data)
      })
      .catch(()=>{
        console.log('실패함')
      })
    }}>버튼</button>
  )
}

동시에 axax 요청 여러개하고싶으면

Promise.all([ axios.get('/url1)', axios.get('/ajax2')])

Promise.all([ axios.get('/url1)', axios.get('/ajax2')])

 

원래 서버랑은 문자만 주고받을 수 있습니다.

 

그래서

arr, obj들은
따옴표 쳐놓으면 주고받기 가능
따옴표 쳐놓은 데이터들을 json 데이터형이라고 부름

axoios가 array로 자동으로 바꿔줌=> axios 사용하는 이유