React실전9 서버ajax1

리액트에서 서버와 통신하려면 ajax 1

오늘은 app.js 로 돌아와서 더보기 기능을 만들어보겠다.

• 사이트 하단에 더보기 버튼을 만들고
• 이를 누르면, 서버에서 데이터를 더 가져와서
• html로 상품 데이터 3개를 더 보여주도록 하겠다.

서버한테 ajax요청이란걸 써서 데이터를 가져올 거야.

배경지식 설명 들어갑니다.

• 서버란?
  • 데이터를 요청하면 진짜로 데이터를 보내주는 프로그램을 다 서버라고 함.
  • 부탁하면 진짜로 들어주는 프로그램
• 예를 들어서 youtube 서버:
  • 동영상 좀 갖다주세요~ 하면 가져다 주는 프로그램
  • 동영상 요청하면 진짜 보내주는 프로그램
• naver 웹툰 서버:
  • 웹툰 요청하면 진짜 웹툰을 가져다 주는 프로그램

서버 만드는 방법 = 서버개발시 짜는 코드

• “누가 A 요청하면 A 보내주세요~”

근데 서버한테 데이터를 요청할 때 그냥 떼를 쓰면 가져다 주는게 아니라,

정확히 규격에 맞춰서 요청을 해야 함.

안그러면 데이터가 안옴.

우리는 1. 어떤 방법으로 2. 어떤 데이터를 요청할 지

잘 기입해야함.

1. 방법은 GET/POST 중에 고르면 돼.

2. 어떤 데이터를 요청할 지는 URL 형식으로 잘 기입하면 됨.

• url은 서버 만든 사람한테 요청하면 된다.

그럼 다시

서버 개발시 짜는 코드:

“누가 comic.naver.com 요청하면 웹툰 보내주세요~”

이제 서버에 get 요청을 해서 데이터를 가져와 봅시다.

• 애플님. 서버 만들어왔음.
• https://codingapple1.github.io/shop/data2.json
• GET요청하면 상품데이터 줌

get 요청 날리는 방법:

1. 브라우저 주소창을 이용
   • 주소창이 get요청하는 곳이다.
2. ajax 사용해도 get 요청 가능
   • 자바스크립트 코드를 이용하는 것.

• get 요청을 하면 새로고침이 된다.
• 근데 그게 싫다 하면 ajax사용. 새로고침 없이도 get/post요청 가능.

app.js에서

아무곳에나 button 한개 생성

<button onClick={()=>{  }}>버튼</button>

ajax 쓰려면 옵션 3개 중 택1

1. 옛날 자바스크립트 문법
2. 요즘 자바스크립트 문법
3. 외부 라이브러리

---

1. XMLHttpRequest
2. fetch( )
3. axios 같은거

• axios 라는 라이브러리가 있다.
• 이걸 사용하면 코드가 조금 짧아진다.
• 한번 설치해보겠다.
• 터미널을 연다.

  npm install axios
  

• 설치 후 라이브러리 세팅하기.

• App.js 파일로 들어가서
• 맨 위에

import axios from ‘axios’

그리고 다시 해당 코드로 와서

<button onClick={()=>{ 
              axios.get()
            }}>버튼</button>

쓰면 ajax get 요청을 날려준다.

• ajax 이용한 GET요청은

  axios.get(‘url’)

• 요청결과는

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

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

• 여기서 실제 데이터만 출력하고 싶다 하면
• data 옆에 .data 하면 됨

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

이렇게 리액트에선 거의 서버와 ajax 이용해서 통신합니다.

간혹,

ajax 요청이 실패할 경우도 있다. - 인터넷이 안되거나 - 서버가 꺼졌거나 - 요청하는 url이 잘못되었거나

• 실패했을 때 특정 코드를 실행하고 싶다 하면

.catch(( )=>{ console.log(‘실패하였음’) })

이렇게 짜면 되는 것임

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

오늘의 숙제:

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

리액트에서는 state이용하면 되겠죠.