[React] React에서의 Ajax

 

Ajax

 

Ajax: 서버에 새로고침 없이 요청 할 수 있게 도와주는 것.

 

요청의 종류에는 여러가지가 있습니다. 이건 제가 예전에 인프런 무료 강의에서도 작성한 내용인데요.

 

1. GET 요청

주소창에 URL 때려 박는 요청

특정 페이지 / 자료 읽기

 

2. POST 요청

서버로 중요 정보 전달

아이디와 비밀번호 같이 조금 숨겨서 전달할 때

 

Ajax 사용하는 방법?

1. jQuery 설치 후 $.ajax()

2. axios 설치 후 axios.get()

3. 자바스크립트에서 fetch() 

 

npm install add axios

 

이번에도 똑같이 라이브러리 설치 후

 

 

import로 axios 추가해주면 됩니다.

 

axios.get(URL).then().catch()

then() 안엔 성공하면 실행할 코드를 작성하는 것이고, catch() 안엔 실패하면 실행할 코드를 작성하는 것입니다.

 

 

이처럼 '더 보기'라는 버튼을 클릭했을 시(onClick={()=>{}}) 동작을 줬습니다.

 

제가 초반에 get과 post의 차이점을 말씀 드렸죠? 노란색 박스를 보시면, id와 pw 같은 경우는 post로 전송해주고, 그 밑에 get으로는 json 파일의 url을 입력했습니다.

 

앞서 말씀드린 것처럼, 성공했을 시에는 then() 안에 데이터를 보여줄 것인데, 제가 첨부한 json 파일을 result.data로 불러와 보여줄 것입니다. 어떻게? 기존 신발 이미지를 보여주던 state에서, 값을 변경해주는 자리에 state 복사본과(...state) result.data를 같이 입력해주는 것입니다.

 

 

실행 화면(이미지는 유료 강의의 자료이기 때문에 가렸습니다.)

 

 

더보기를 클릭 하면,

 

 

이런식으로 상품이 늘어난 것을 확인할 수 있습니다.