리액트에서의 ajax

리액트와는 axios가 호환이 잘 맞아서 사용해보도록 하자.

npm install axios
//또는 yarn add axios

로 먼저 axios를 설치해준다.

import axios from 'axios';

그러고, 상단에 axios를 import 해온다. 

버튼을 누르면 데이터를 가져오는 코드를 예제로 만들어보자

<button className="btn btn-primary" onClick={() => {
            axios.get('https://codingapple1.github.io/shop/data2.json')
            .then((result)=>{
              console.log(result.data);//result는 성공시 성공한 이유와 등등 가져옴 따라서 .data적어주기
            })//성공시
            .catch(()=>{
              console.log('실패했어요');
            })//실패시
} }>더보기</button>

이렇게 버튼에 onClick시 axios.get('주소')로 데이터를 받아오고 성공시에 할 코드를 then에 실패시에 할 코드를 catch에 적어준다.

then에 파라미터를 적으면 성공시에 가져온 데이터와 성공한 이유 등등 여러가지가 적히는데 뒤에 .data를 적으면 데이터만 가져오게 된다. (axios는 JSON을 Object로 알아서 바꿔준다.)

이제, then에

shoes변경([...shoes,...result.data])

이렇게 적어주면서 shoes라는 원래 있던 데이터에 ...shoes로 대괄호를 벗겨서 ( 데이터가 [ {}, {}, {} ]여기서 [ ]벗겨서 {},{},{}만 나열하게 함 ) result.data 어레이들과 합쳐준다.

더보기를 2번째 누르면 새로운 URL로 데이터 요청을 하고 싶다면 변수나 state로 누른 횟수를 저장해서 경로를 바꿔주면 된다. 또는 loading중입니다 UI를 만들어서 평소엔 false였다가 버튼을 누르면 true였다가 데이터 요청 성공하면 다시false로 바뀌게 작성하면 된다.

 

서버에 데이터를 보내고 싶을 땐 POST요청을 한다.

axios.post('서버URL', {id : 'codingapple', pw : 1234});

이런 식으로, 서버URL을 넣고, 두번째 파라미터엔 보낼 값을 적는다. 요청 시 header 설정도 가능하다.

 

만약, 어떤 컴포넌트 로드 시 ajax로 데이터를 가져오고 싶으면(업데이트 시 에는 제외) useEffect()를 사용해

useEffect(()=>{
	axios.get()
},[]); //이렇게 끝에 대괄호[] 넣으면 업데이트시엔 실행이 안되게 함

이런 식으로, useEffect와 axios를 같이 사용할 수 있다.