[React] (7) 서버 통신

1. 서버란?

- 유저가 데이터를 요청하면 데이터를 보내주는 간단한 프로그램

** 서버에 데이터 요청시 정확한 규격

  - 어떤 데이터인지(URL형식으로)

  - 어떤 방법으로 요청할지(GET / POST)

  * 보통 데이터를 가져올 때는 GET, 서버로 보낼 때는 POST

   -> 하지만 GET, POST의 단점은 브라우저가 새로고침됨

=> AJAX

 

2. AJAX란?

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

 

** AJAX로 GET/POST 요청하는 방법

  ① XMLHttpRequest라는 옛날 문법 쓰기

  ② fetch() 라는 최신 문법 쓰기

  ③ axios같은 외부 라이브러리 쓰기

 

(1) axios

- axios 설치

npm install axios

 

- App.js

import axios from 'axios';

function App() {
  return (
    <div className="App">
      <button onClick={()=>{
        axios.get('https://codingapple1.github.io/shop/data2.json').then((result)=>{
          console.log(result.data);
        })
        .catch(()=>{
          console.log('FAIL')
        })
      }}>더보기</button>
    </div>
  );
}

  - axios.get(URL) -> URL로 GET 요청

  - result.data : 데이터 가져온 결과

  - .catch() : 인터넷이 안되거나 URL이 이상하거나 등등 실패했을 때 실행할 코드

 

// 1. GET 요청
axios.get('URL').then((result)=> {
})
.catch(()=>{
	// 실패했을 떄
})

// 2.POST 요청
axios.post('URL', {name : 'kim'})

// 3. 동시에 AJAX 여러개 요청
Promise.all( [axios.get('URL1'), axios.get('URL2')] )

 

** 서버와 문자만 주고받을 수 있음

    "{"name" : "kim"}"  -->  따음표쳐놓으면 array, object도 주고받기 가능(일명 JSON)

 

(2) fetch

import axios from 'axios';

function App() {
  return (
    <div className="App">
      <button onClick={()=>{
        fetch('https://codingapple1.github.io/shop/data2.json')
        .then(result => result.json())
        .then((result)=>{ console.log(result) })
      }}>더보기</button>
    </div>
  );
}

  - JS 문법인 fetch()는 JSON -> object/array 자동으로 안바꿔줘서 직접 바꾸는 작업이 필요하다.

 

** axios vs fecth

https://velog.io/@sunkim/React-axios-%EC%99%80-fetch-%EC%B0%A8%EC%9D%B4%EC%A0%90

[React] axios 와 fetch 차이점

=> axios는 주로 react, fetch는 react native에 사용

 

 

## 코딩애플 React part2 강의 내용 ##

https://codingapple.com/course/react-basic/

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌