서버에 데이터를 요청할건데…

💡 서버 : 데이터를 요청하면 데이터를 보내주는 프로그램

ex. Youtube 서버 : 동영상 요청하면 진짜 보내주는 프로그램

네이버웹툰 서버 : 웹툰 요청하면 진짜 보내주는 프로그램

서버 개발시 짜는 코드 : 누가 이 URL로 GET/POST 요청하면 data 보내주세용

1. 방법(GET : 서버에서 데이터 가져올 때/POST : 데이터 서버로 보낼 때)
2. 어떤 자료 (URL 형식)

→ URL은 서버만든 사람한데 물어보면 됨

ajax 사용해도 GET 요청 가능!

• 원래는 GET/POST 요청시 새로고침됨
• ajax 사용하면 새로고침 없이도 GET/POST 요청 가능
• ajax 쓰려면 옵션 3개 중 택1

1. XMLHttpRequest : 옛날 js 문법
2. fetch() : 요즘 js 문법
3. axios : 외부 라이브러리

→ ajax 요청 좀 더 짧고 간단하게 할 수 있음!

axios 설치

npm install axios

axios import

import axios from ‘axios’

ajax 이용한 GET요청은

axios.get(’url’)

axios.get(’https://codingapple1.github.io/shop/data2.json’)

요청결과는

axios.get(’url’).then()

axios.get('https://codingapple1.github.io/shop/data2.json')
.then((결과)=>{
  console.log(결과.data) => 실제 결과의 data
})

→ 새로고침 없이 데이터를 깔끔하게 가져옴

전체 코드

<button onClick={()=>{
                    axios.get('https://codingapple1.github.io/shop/data2.json')
                    .then((data)=>{
                      console.log(data)
                    })
                   }}>button</button>

🎤 리액트에선 거의 서버와 ajax 이용해서 통신한다

Q. ajax 요청 실패할 경우?

→ 예외처리 해줘야함

# 예외처리

.**catch**(()=>{
    console.log('실패함..')
})

전체코드

**axios.get('url')**
**.then**((결과)=>{ 
	GET요청 결과 코드
})
**.catch**(()=>{
	ajax요청 실패할 경우 코드
})
}}

<button onClick={()=>{
    **axios.get('https://codingapple1.github.io/shop/data2.json') #GET요청**
    .**then**((결과)=>{ #GET요청 결과
         console.log(결과.data)
     })
    .**catch**(()=>{ #ajax 요청 실패할 경우
       console.log('실패함..')
    })
}}>버튼</button>

Q. 버튼 누르면 데이터 더 가져와서 html로 보여주기

리액트 - shoes라는 state 스위치 조작

1. state변수, state변경함수, state초기값 설정

let [shoes, setShoes] = useState(data);

1. shoes에 가져온 데이터 추가해주세요~

(1) copy본 만들어서 수정

(2) state변경함수 사용

let copy = [...shoes, ...결과.data] //{}, {}, {} -> JSON data로 받아옴(axios가 array로 자동으로 바꿔줌)
setShoes(copy);

→ object data가 하나씩 들어있음

→ 목표는 [{},{},{}] 로 array로 합하는것!

→ 괄호를 벗겨주고, 다시 괄호를 씌워주세용

전체 코드

<button onClick={()=>{
              axios.get('https://codingapple1.github.io/shop/data2.json')
              .then((결과)=>{ 
                **console.log(결과.data)** //[{}, {}, {}] -> 데이터가져오기
                //shoes에 가져온 데이터 추가해주세요~
                **let copy = [...shoes, ...결과.data] //{}, {}, {}
                setShoes(copy)**
               })
               .catch(()=>{
                console.log('실패함..')
               })
            }}>더보기</button>

응용1. 버튼 2회 누를 때는 7,8,9번 상품 가져오려면?

→ 버튼 누른 횟수 저장해두면 좋을듯

1. state변수, state변경함수, state 초기값 설정

let [click, setClick] = useState(2);

→ 버튼 2회 누른 다음 부터 +1을 해줄것이기 때문에 초기값을 2로 설정해줌

1. state변경함수 사용해서 state변경해줌!

setClick(click+1);

1. axios.get 할 url을 click 변수를 넣어서 조작해줌

axios.get('https://codingapple1.github.io/shop/data'**+ click +** '.json')

응용2. 버튼 3회 누를 때는 상품 더 없다고 알려주기

→ .catch 를 써줌!

<button onClick={()=>{
                    setClick(click+1);
                    axios.get('https://codingapple1.github.io/shop/data'+ click + '.json')
                    .then((결과)=>{
                      console.log(결과.data)
                      let copy = [...shoes, ...결과.data]
                      setShoes(copy)
                    })
                    **.catch(()=>{
                      console.log('상품없음')
                    })**
                   }}>더보기</button>

응용3. 버튼 누르면 “로딩중입니다” 글자 띄우기

서버로 데이터 전송하는 POST 요청

axios.post('url', {id : key)

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

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

**Promise.all([axios.get('/url1'), axios.get('/url2') ])
.then(()=>{

})**

→ 첫번째 ajax요청, 두번째 ajax요청

→ axios.get 요청을 나라히 써도 되지만, 그러면 두개 다 성공했을 때 코드실행해주세요~ 하기는 어렵기 때문에 동시에 요청할 때는 Promise.all 사용하자

원래는 서버와 문자만 주고받을 수 있음

→ array나 object 데이터 못 주고받음

→ 근데 따옴표쳐놓으면 array, object도 문자로 인식되어 주고받기 가능

“{”name” :”kim”}” 일명 JSON data는 문자 취급을 받는 데이터이므로 마음대로 주고받기 가능!!

→ 실은 아까 결과.data도 JSON으로 받아온 것임

fetch()

→ 그냥 JS 기본문법으로도 GET요청 가능

→ 라이브러리 도움 없이 GET요청 가능

→ 근데 JSON에서 array/object로 자동변환이 안되므로 직접 변환코드를 작성해줘야함

fetch(’https://codingapple1.github.io/shop/data2.json’)
.then(결과=>결과.json())
.then(data=>{}) 
-> fetch로 데이터를 가져오면 JSON->array/object 변환과정이 필요하므로 이렇게 써줘야함!

→ 이게 JSON을 array나 object로 변환해주는 코드임(귀찮아)

→ 그래서 axios가 편한것임!!