ajax - axios

Get / Post 요청하는 법?

• 서버에 데이터를 요청할 때는 정확한 규격에 맞춰서 요청해야됨
  • 어떤 데이터인지 (URL 형식으로)
  • 어떤 방법으로 요청할지 (Get or Post)
• 데이터를 가져올 때는 보통 GET
  
  • GET 요청을 날리고 싶으면 가장 쉬운 방법은 브라우저 주소창
  • 거기에 URL 아무거나 적으면 그 곳으로 GET 요청을 날려줌
• 데이터를 서버로 보낼 때는 보통 POST
  • <form action = "요청할 url" method = "post"> 태그 이용하면 된다.
  • 폼이 전송되었을 때 POST 요청을 날려줌
• GET, POST 요청을 이렇게 날렸을 때 단점은 브라우저가 새로고침 된다.

AJAX?

• 서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능
• 이것을 쓰면 새로고침 없이 통신이 가능하고 댓글을 서버로 전송할 수도 있다.
• AJAX로 GET / POST 요청을 하려면 방법은 3가지가 있다.
  • XMLHttpRequest라는 옛날 문법 쓰기
  • fetch() 라는 최신 문법 쓰기
  • axios 같은 외부 라이브러리 쓰기

axios

npm install axios

• 일단 터미널로 설치를 해준다.

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>
  )
}

• 만든 서버에 ajax 요청을 보내기
• 저 url로 get 요청을 보내면 상품 3개를 가져오도록 서버에서 만들어놓음

1. axios를 쓰려면 상단에 import
2. axios.get(URL) 이러면 그 URL로 GET 요청
3. 데이터 가져온 결과는 결과.data 안에 들어있다.
   • 위의 버튼 누르면 서버에서 가져온 데이터가 콘솔창에 출력됨
4. 인터넷이 안되거나 URL이 이상하면 실패된다.
   실패했을 때 실행할 코드는 .catch() 안에 적으면 됨.

응용

서버에서 데이터를 가져와서 html에 가져온 데이터를 가져와 동적인 ui 만들기

1. 서버에서 데이터 가져오기
2. html 3개 더 만들어주기

import axios from 'axios'

function App(){

  let [shoes, setShoes] = useState(어쩌구);
  return (
    <button onClick={()=>{
      axios.get('https://codingapple1.github.io/shop/data2.json').then((결과)=>{
        let copy = [...shoes, ...결과.data]
        setShoes(copy)
      })
      .catch(()=>{
        console.log('실패함')
      })
    }}>버튼</button>
  )
}

• 리액트에선 state를 조작하여 알아서 html이 변경되도록 코드 작성
• shoes라는 state에 자료 3개 추가해달라고 코드 추가하면 된다.

1. 점 3개 사용해서 shoes의 사본을 만들기
   • 그 안에 ...결과.data 도 함께 뒤에 집어넣기
   • 결과.data 출력해보면 [{4번}, {5번}, {6번}] 이게 나오기 때문에 ...결과.data하면 {},{},{} 이것만 남는다.
2. 그 후에 이것들을 shoes라는 state에 추가
3. 그럼 버튼을 누르면 shoes라는 state는 배열 안에 3개의 데이터가 추가되어 그거에 맞게 html도 추가 생성된다.

Post요청

axios.post('URL', {name : 'kim'})

• 이렇게 실행하면 서버로 {namse : 'kim'} 자료가 전송된다.
• 완료 후 특정 코드를 실행하고 싶으면 .then() 뒤에 붙이면 된다.

동시에 AJAX 요청 여러개 날리려면

Promise.all( [axios.get('URL1'), axios.get('URL2')] )

• 이러면 URL1, URL2로 GET요청을 동시에 해준다.
• 둘 다 완료시 특정 코드를 실행하고 싶으면 .then() 뒤에 붙이면 된다.

원래는 서버와 문자자료만 주고받을 수 있다.

• object / array 이런거 원래는 못 주고 받는다.
• 위의 array 자료 받아온 것은 object / array 자료에 따옴표를 쳐놓으면 된다.
  " { "name" : "kim" } "
  • 이것을 JSON이라고 한다. 
  •  JSON은 문자 취급을 받기 때문에 서버와 자유롭게 주고받을 수 있다.
  •  

• 실제로 결과.data 출력해보면 따옴표쳐진 JSON이 나와야 하지만 axios 라이브러리는 JSON -> object / array 변환 작업을 자동으로 해줘서 출력해보면 object / array가 나온다.

fetch('URL').then(결과 => 결과.json()).then((결과) => { console.log(결과) } )

• 자바스크립트 문법인 fetch()를 이용해도 GET / POST 요청이 가능하지만 이건 JSON -> object / array를 자동으로 바꿔지 않기 때문에 직접 바꾸는 작업이 필요하다.

ajax로 가져온 데이터를 html에 넣을 때 에러가 자주 나는 이유?

1. ajax요청으로 데이터를 가져온다.
2. state에 저장하라고 코드를 작성
3. state를 html에 넣어서 보여달라고 <div> {state.어쩌구} </div> 이렇게 코드 작성
   근데 이 상황에서 state가 비었다는 에러가 자주 발생

=> ajax 요청보다 html 렌더링이 더 빨라서 그럴수도 있다. state안에 뭐가 들어있으면 보여달라고 if문 같은 걸 추가하거나 하면 해결 가능