[AJAX] AJAX가 무엇인가 & 사용방법

AJAX(Asynchronous Javascript And XML)

AJAX는 자바스크립트 라이브러리 중 하나이며 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 이며 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML, Json 데이터들을 주고받는 기술이다.

다시말해 비동기 방식으로 새로고침없이 서버와 클라이언트가 통신할 수 있도록 도와주는 라이브러리다.

AJAX 사용 방법

1. jQuery Ajax를 사용한다.
2. Axios 라이브러리를 사용한다.
3. 자바스크립트 기본 함수인 fetch()를 사용한다.

최근에는 jQuery를 사용하지않고 Axios나 fetch()를 사용한다.따라서 React에서 사용하려는 나에게는 호환성도 관련문서가 많은 Axios를 사용하는 것이 적합해 보인다.

 

npm install axios

위 구문을 터미널에 입력하면 Axios 라이브러리가 설치된다,

 

import axios from 'axios';

function App(){
  
  return (
    <HTML많은곳/>
    <button className="btn btn-primary" onClick={()=>{

      axios.get('https://codingapple1.github.io/shop/data2.json')
      .then((result)=>{ console.log(result.data) })
      .catch(()=>{ 요청실패시실행할코드 })

    }}>더보기</button>
  )
}

 

설치가 완료되면 위 코드처럼

1.import axios from 'axios';를 코드 상단에 선언한 뒤에

2.자신이 사용할 이벤트를 지정하고 axios 라이브러리를 사용한다. 위코드에서는 button 클릭 이벤트에 사용되었다.

3.axios.get()요청을 보내서 json을 리턴받았다.

4.비동기 통신이기 때문에 then으로 처리한다. 또한 에러처리를 하기위해서 꼭 catch를 넣어준다.