리액트 ajax요청

Ajax는 서버에 새로고침없이 요청을 할 수 있게 도와준다.

요청의 종류

1. GET요청: 주소창에 URL입력. 페이지/자료읽기

2. POST요청 : 서버로 중요 정보 전달

Ajax 쓰는 법

1. jQuery 설치 후 $.ajax()

2. axios 설치 후 axios.get()

3. 바닐라 자바스크립트로 fetch()

리액트에서는 axios를 사용한다.

설치

#yarn add axios

import axios from 'axios';

<button className="btn btn-primary" onClick={()=>{
         axios.get('api주소')
              .then((result)=>{
                console.log(result.data)
              })
              .catch(()=>{
                console.log('실패')
              })
            }}>더보기</button>

요청한 자료는 따옴표가 있는 JSON이다.

axios 를 쓰면 JSON을 Object로 알아서 바꿔준다.

• Detail 컴포넌트 로드시 ajax로 데이터를 가져오고 싶을 때

  useEffect사용함.

  Detail컴포넌트 등장 &업데이트시 실행할 코드

  업데이트 시 실행 안되게 마지막에 콤마, 대괄호 잊지 말것