React(11) 서버와 통신하려면 : aixos

목차

서버란?

ajax란?

axios

• 세팅하기
• get하기
• post하기

---

 

서버란?

• 서버라는 것은, 어떠한 것을 요청하면, 그에 맞는 것을 보내주는 프로그램이다.
  말이, 진짜 너무 당연한 얘기로 듣고 흘려 들을 수 도 있겠지만, 이것은 굉장한 정보이다.
• 사용자가 원하는 어떠한 것에 대해 명확히 기입하고,
  요청하는 코드에 인자로 실어서 보내면,
  그에 맞는 것을 보내주게끔 하는 것이 서버라고했다.
  따라서, 서버개발시 짜는 코드로는, "어떠한 사용자가 A라는 것을 요청하면 A를 보내주세요!"를 작성해야한다.

 

---

 

ajax란?

• ajax를 이용하여, 공공 데이터 api를 불러오는 코드를 작성한 명글이 있다. 참고하도록 하자.
• https://joyjoon.tistory.com/17

AJAX에 대하여

• 요약하자면, 서버와 통신하려면, ajax라는 기술을 사용하여 서버에게 사용자가 이러이러한 자료를 원한다면
  -> ①어떠한 방법으로(get/post) ②어떤 자료를 보내(거나 받아라) 라는 코드를 적어 놓게끔 하는 도구이다.

위의 링크에서는 html에서 작동을 시킬 것 이기 때문에, jquery라는 외부 라이브러리를 import했지만,

여러 방법과, 리액트에서만의 방법이 있다.

1. 위와 같이, jquery라는 외부 라이브러리를 사용하기
2. 구시대 문법인 XMLHttpRequest 사용하기
3. 요즘 문법인 fetch() 사용하기
   간단하게 알아보기 ↓
   
   • 문법은 fetch('url') 가 되겠다.
   • 근데 이때 주의를 해서 추가해줘야할 점이, 기본적으로 ajax에서 "문자열"만 get이나 post가 가능하다.
     하지만 우리가 보는 화면은 리스트로 받게 되는데,
     그 이유는, json이라는 파일 형식이, "{ "name" : "kim" }" 와 같이 편법으로 주고 받는 것 이다.
     이를 라이브러리들이 array등으로 교체를 해주기 때문이다.
   • 따라서, fetch('url').then( 결과 => 결과.json() ).then( data => {} ) 와 같이 object를 array로 변경을 해줘야 되겠다.
4. 리액트 라이브러리인 axios 사용하기

필자는 이번 글에서, axios를 사용해보고자 한다.

 

---

 

axios 세팅하기

1. 터미널에서, npm install axios 를 입력한다.
2. App.js의 맨 위에, import axios from 'axios'를 추가한다.

---

axios로 get하기

1. 요청결과를 url에서 가져와서, 출력하려면, axios.get('url').then( (파라미터) => {코드} )형식으로 작성하면 되겠다.
   
2. 예시 코드를 들자면, axios.get('url').then( (aaa) => { console.log(aaa) } ) 로 작성할 수 있겠는데,
   aaa라는 파라미터로 받아서, {}안에서 관련 데이터를 바인딩하여 사용하면된다
3. 하지만 위에 같이 작성하게 된다면, 쓰여있는 모든 데이터들(status, config 등)이 오게되어서,
   axios.get('url').then( (aaa) => { console.log(aaa.data) } ) 처럼 .data를 붙이면 된다.
   • 요청했는데, 데이터를 가져오는데에 실패 할 경우도 대비하여 작성하는법 :
     axios.get('url').then( (aaa) => { console.log(aaa.data) } ).catch( () => { console.log("실패") }
     로 작성하면 더욱 촘촘하게 코드를 짤 수 있을 것이다.
   • 동시어 ajax 요청을 여러개 하려면 :
     Promise.all( [axios.get('url'), axios.get('url')] ).then( (values) => { console.log(values) } );
     로 작성하면 되겠다.

---

axios로 post하기

1. 데이터를 서버로 전송하려면, axios.post('url', {전송할 내용} ) 형식으로 작성하면 되겠다.
   (get써도 되긴함)
   
   서버와 데이터를 직접 구현해야하므로 사진은 생략하겠다.

 

---

 

참고 블로그 : 

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

[React] axios 와 fetch 차이점

https://iridescent-zeal.tistory.com/221

[React]리액트 fetch 와 axios - 영화 정보 가져오기