리액트-ajax 요청하기(axios)

Ajax 요청은 "서버에게 요청을 하는데 새로고침 없이 이루어지는 것"이다.
보통은 jQuery설치 후 ajax 요청을 많이 하는데
리액트 환경에서는 fetch함수를 사용하거나, axios라이브러리를 많이 사용한다고 한다.

---

서버는 간단하게 말하면 그냥 "누군가 요청하면 데이터를 갖다주는 곳" 이고,
요청은 말그대로 서버에 요청하는 것으로, GET 과 POST 가 있다.

브라우저창에 naver.com 직접 입력하는 것이 GET 요청이고,
네이버에서 로그인하고 댓글창 보고 하는게 POST 요청이다.

원래 GET과 POST요청을 하면 새로고침이 발생하는데, Ajax요청은 새로고침이 없다는 것이 큰 특징이다.

---

axios 설치 먼저 하기

1. yarn add axios 혹은 npm install axios 터미널에 입력 후

2. 상단에 import axios from 'axios' 해준다.

3. axios.get(GET요청할 URL) 입력해주고

4. .then() 혹은 .catch() 를 뒤에 이어붙여준다. 각각은 요청이 성공했을 때/실패했을 때 실행할 코드를 의미한다.

<button
              className="btn btn-primary"
              onClick={() => {
                axios
                  .get("데이터를 불러올 URL")
                  .then((result) => {
                   	console.log(result.data);
                  })
                  .catch(() => {
                console.log("실패요");
                });
              }}
            >
              더보기
            </button>

then 안의 콜백함수에 파라미터(result)를 추가해주면 그게 받아온 데이터이다.

---

내가 서버에서 가져온 자료는 Object형처럼 보이지만, 모든 텍스트에 따옴표가 쳐져있다.

[
	{
    "id": 3,
    "title": "red",
    },
    {
    "id": 4,
    "title": "blue:,
    },
]

이런식으로, object형같지만 JSON이라는 자료형이다.
서버는 텍스트만 전송할 수 있기 때문이다.
JSON자료형은 Object형으로 변환을 해줘야 ㅁㅁ.title 이런 식으로 정보를 뽑아낼 수 있는데, axios라이브러리는 이 과정을 자동으로 수행하기 때문에 편한 것이다.