React실전10 서버ajax2:post,fetch

저번시간 숙제:

1. 데이터 가져와주세요
2. html로 보여주세요.

shoes라는 state를 잘 조절하면 html을 만들 수 있겠죠.

• shoes에 데이터 몇 개 추가해주세요~
• 그럼 html도 알아서 생성 될 듯 합니다.

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

이렇게 리액트에서 UI만드는 법 잘 기억해두기!! 스위치

---

응용1

data3.json 버튼을 2회 누를 때는 7,8,9번 상품을 가져오려면?

• 힌트: 유저가 버튼 누른 횟수를 저장해두면 좋을 듯.

응용2.

버튼을 3회 누르면 상품 더 없다고 알려주기.

• -> 3번 누르면 버튼 없애거나
• -> 상품 없어요 출력하거나
• 조건문으로 구현하기

응용3. 버튼 누르면

• ‘로딩중입니다.’ 글자 띄우기

• 버튼을 누른 직후에 로딩중 ui 띄우기.
• 성공했다.
• 로딩중 ui 숨기기

이렇게 짜면 됩니다.

때에 따라서 띄우거나 숨기거나.

정확히 하려면 .catch(()=>{})를 더해주기.

---

오늘은 여러가지 ajax

서버로 데이터 전송하는 POST 요청 자유롭게 object 자료형 입력할 수 있구요.

동시에 ajax 요청 여러개하려면

Promise.all([axios.get(‘/url1’), axios.get(‘/url2’)])

원래 서버와 문자만 주고 받을 수 있음. array object데이터 주고 받을 수 없음. 따옴표 쳐놓으면 array,object 주고받기 가능 이를 JSON이라 함.

얘도 실제로는 JSON데이터가 도착하는데 axios라이브러리가 array로 자동으로 바꿔줌.

fetch() 로 데이터를 가져오면 json데이터 변환 직접 해줘야함.

이런것들이 axios의 편리한 점들.

fetch(‘http://어쩌구’)
.then( 결과 => 결과.json() ) : JSON array object 변환 필요
.then( data=>{ } )