React - 서버와 통신하기 ajax1

🖤 서버란?

• 유저가 데이터를 달라고 요청하면 데이터를 보내주는 간단한 프로그램이다.

• ex) 네이버웹툰 서버 : 유저가 웹툰을 달라고 하면 웹툰을 보내주는 프로그램
  유튜브 서버 : 유저가 영상을 달라고 하면 영상을 보내주는 프로그램

• 서버개발이란? "누가 A를 요청하면 A를 보내주세요" 라고 코드를 짜면 끝이다.
  

• 유저가 그냥 데이터를 달라고 하면 서버는 보내주지 않는다!

• 서버에 데이터를 요청할 때에는 정확한 규격에 맞춰서 요청해야한다.

1. 어떤 데이터인디 (URL 형식으로)
2. 어떤 방법으로 요청할지 (GET or POST)

• 데이터를 가져올 때에는 GET을 고르고
• 데이터를 내보낼 때에는 POST 를 고르면 된다.
  
  

🖤 GET / POST 요청하는 방법

• GET 요청을 하는 가장 쉬운 방법은 브라우저 주소창이다.
  

• 이렇게 선생님이 만든 서버URL 을 입력하면 창에 자료가 뜬다.
  
  

• POST 요청을 하고 싶으면
  <form action="요청할url" method="post"> 태그를 이용하면 된다.

• GET, POST 요청을 했을 때의 단점 : 💡브라우저가 새로고침 된다.

🖤 AJAX 란?

• 서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능이다.

• 이걸 사용한다면 새로고침 없이 쇼핑몰 상품을 더 가져올 수 있고, 새로고침 없이 댓글을 서버로 전송할 수 있다.

• 터미널을 열어서 npm install axios 입력하면 설치가 끝난다.
  
  

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

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

---

📒 오늘의 숙제

: 버튼을 누르면 서버에서 상품데이터 3개를 가져와서 메인페이지에 상품카드 3개를 더 생성해보기

• (힌트) 리액트에서는 html을 3개 더 생성해주세요~ 가 아닌 state를 조작하면 html이 알아서 생성된다.

let [shoes2] = useState(결과.data);

<button
  onClick={() => {
    axios
      .get("https://codingapple1.github.io/shop/data2.json")
      .then((결과) => {
        console.log(결과.data);
        [shoes2] = 결과.data;
        console.log([shoes2]);
      });
    }}
>
버튼
</button>

• 기존의 Card() 함수를 활용해서 만들기 위해 useState를 이용해 가져온 데이터 결과.data를 [shoes2] 에 저장하려고 했다.
• 하지만 결과를 자꾸 불러오지 못했다.😩

• 그러다가 shoes2 를 빈 칸으로 두고 onClick() 안에서 결과.data 를 [shoes2] 에 삽입 후 console.log 로 확인해보니 가져온 데이터 중 첫번째 object만 가져왔다...

• 결국 선생님과 함께...💦💦

• 서버에서 데이터 상품을 가져와 상품 html 3개를 작성하는 순서

1. 서버에서 데이터를 가져와주세요
2. html을 3개 만들어주세요

• 이렇게 코드를 2개 짜면 된다.

• 1번은 ajax 를 통해 가져왔고 2번 코드만 짜면 숙제가 끝난다.
  
  

• 현재 shoes.map() 덕분에 shoes 에 들어있는 자료 갯수만큼 html이 자동으로 생성되고있다.

• 우리가 "shoes 라는 state에 자료 3개를 추가해주세요~" 라는 코드를 짜면 알아서 3개 더 생성되지 않을까??

✍ shoes.map 을 활용하는 것은 알았지만 접근하는 방법이 달랐다.
shoes라는 state에 자료 3개를 추가하면 되는 것이었다!
그렇게 하면 자동으로 shoes.map() 으로 자료가 나열 되는 것이다.

import axios from 'axios'

function App(){

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

• state를 수정하기 위해 setState 파라미터를 추가했다.
• 점 3개를 이용해서 shoes의 사본을 만들었다.
  shoes 라는 state는 이제 [{},{},{},{},{},{}] 이런 형태가 된다.

💡 동적인 UI 만드는 법 꼭 기억하기!