ajax로 더보기 버튼만들기

보통 get, post요청을 하면 브라우저가 새로고침이 되는데, ajax를 이용하면, 새로고침 없이 가능하다.

ajax요청을 하려면, 1. axios를 사용하던가, 2. 기본 fetch함수를 사용하던가 하면 된다.

npm install axios

위처럼 입력해서 axios를 설치하고,

import axios from 'axios';

상단에 axios를 import해준다.

이렇게 더보기 버튼을 만들고, 더보기 버튼을 누르면 서버에서 추가 게시물을 가져오고, 그걸 <Post>로 보여주게 될 것이다.

<button @click="more">더보기</button>

이렇게 만들고,

methods: {
    more() {
      //post는
      //axios.post('url',{name: 'Lee'}) 이런 식으로 데이터를 url에 전송함
      //.then은 성공시 .catch는 실패시임
      axios.get(
        'https://codingapple1.github.io/vue/more0.json'
      ).then(
        (결과) => {
          //요청성공시 실행 코드
          this.instadata.push(결과.data)
        }
      )
    }
  }

이런 식으로, more이란 함수에, axios.get('url')을 넣어서 주소로부터 데이터를 받아오는데 성공하면, then안에 콜백함수를 써서 결과라는 파라미터에 데이터를 받아오고, instadata라는 데이터에 결과.data를 넣어주면 자동으로 ui를 랜더링해준다.

instadata는 <Post />컴포넌트에서 반복문으로 보여주고 있기에 데이터만 늘어나면 자동으로 보여주게 된다.