React Ajax 요청방법에 대해 알아보자!

오늘은 리액트에서 Ajax의 요청방법은 어떻게 하나? 에대해서 알아보고자합니다만,

그전에 Ajax에 대한 개념과 Ajax를 사용하려할 때 알아야 할 요청방법들에 대해서도 살펴보도록 하겠습니다.

자, 그럼 먼저 오늘 목표로 하려하는 Ajax, 요녀석은 뭘까요?

 

 

 

| Ajax 란?

Ajax란 Asynchronous JavaScript and XML의 약자로

웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있는 것입니다.

Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있습니다.

예를들어, 홈페이지에 3영역으로 나눠져있습니다.

내가 검색하고 싶은 것을 검색할 수 있는 검색 영역,

검색해서 나오는 목록 수(조회영역)

검색해서 나온 목록 중 하나를 누르면 그 하나의 데이터 내용들을 더 상세하게 볼 수 있도록하는 상세영역

여기서 검색을 할 때마다마다 조회영역에서는 검색란에 입력한 것에 따라 데이터가 나올텐데 이게 계속 새로고침하여 깜빡깜빡 화면에 나와 눈을 따갑따갑하게 한다고 생각해보십시오. 너무 아프겠죠,

이때 이 Ajax는 위에서 말했듯이 웹 페이지의 일부분만 표시, 즉, UI화면에 사용자가 요청한 데이터를 조회영역쪽에만 보내게하는 것입니다.

---

간단하게 말하자면,

서버에 새로고침없이 요청을 할 수 있게 해주는 것이죠.

또 하나의 정의로는

만약 아범이 naver에 들어가려면 주소창에 naver.com 이라고 쳐야 나옵니다.

즉 네이버 서버에 요청해서 메인 페이지가 띵 하고 나온것.

사용자가 나 이거 열고 싶어!하면 자, 여기!하고 갖다주는 것이라고 생각하시면 됩니다.

그런 이 ajax를 사용할 때의 요청은 두가지 방법이 있는데,

브라우저에 직접 입력하는 요청은 get 요청 : 자료를 읽고 싶을 때 많이 사용,

나머지 요청 방법에서 Post 요청이 있습니다. Post 요청은 아이디, 비밀번호를 입력할 때 URL에다 입력하는 것이 아니라 정보를 숨겨서 요청할 때 Post요청으로 이용하기도 합니다. 중요 정보를 전달할 때 사용하죠.

Get방식, Post방식이 있다는 것.

그럼 Get방식은 어떠할 때 사용하고 Post방식은 어떠할 때 사용을 해야하는가?

 

 

| Get방식 vs Post 방식

그럼 다시 Ajax는? 서버에 요청을 하되 새로고침없이 요청할 수 있게 도와주는 코드입니다.

GET이나 POST 요청방식을 할 땐 새로고침을 하는데 Ajax는 필요치 않다는 것!

 

 

 

Ajax를 쓰는 방법은

1. 자바스크립트의 fetch()를 사용해서 2. 제이쿼리를 설치하여 $.ajax()라든가 3. axios를 설치해서 axios.get()를 사용하는 방법이 있는데 이 중 아범은 리액트에 3번째 방법인 axios를 설치하여 리액트에서 ajax 요청을 해보도록하겠습니다.

 

 

| React에서 Ajax 요청방법

 

설치시작! 먼저 axios 라이브러리 설치

새터미널열고 yarn add axios 입력

import axios from 'axios'; 위에 입력하여 이제 내가 ajax하려고 axios를 설치했어~라고 알려줍니다.

이제 더보기 버튼을 눌렀을 때 서버에 Ajax 요청을 하여 상품 데이터를 더 가져올 예정입니다.

버튼을 눌렀을 때 요청이 될 수 있도록

<Button variant="secondary" onClick={()=>{ axios.get(); }}>더보기</Button>

axios.get('Get 요청할URL입력');

우선 연습으로 https://www.naver.com/ 을 넣어 잘 정용되는지 테스트

axios.get( 'https://www.naver.com/' ) 입력

이렇게 하면 새로고침 없이 데이터를 가져올 수 있습니다..!

axios.get( 'https://www.naver.com/' ).then().catch() 이렇게 입력하여 요청이 정상적으로 실행될 경우와 실패할 경우 실행할 코드를 각 담을 수 있도록합니다.

 

 

하고 실행한다면 F12에 '성공' 또는 '실패' 가 뜹니다.

그럼 성공했을 때 ajax로 가져온 자료를 출력해봅시다.

성공결과를 담아서 보여주기

fetch();를 사용하면 비슷하게 fetch('여기 안에 요청해서 보일 URL 입력').then();

여기서 잠깐 알아두어야할 점은

가져온 데이터를 살펴보면 " " 따음표가 쳐져있습니다. 근데 오브잭트 자료형은 따옴표가 없습니다.

" " 쳐져있는 것은 JSON !!

axios를 쓰면 json을 object로 알아서 바꿔줍니다.

근데 fetch(); 같은 경우에는 json을 그대로 가져온다는 것 따라서 json을 가져와서 object로 바꿔주는 작업을 또 해야한다는 것, 따라서 axios를 사용

그럼, ajax를 이용하여 받아온 상품데이터들을 더보기를 눌렀을 때 추가하여 보여주는 작업을 해봅시다.

이 <Card>라는 컴포넌트를 각각의 상품들은 반복문으로 만들어졌다.

따라서 game라는 데이터를 조작해야한다든 것 더보기를 클릭해서 기존 데이터보다 더 보여준다?

그럼, game에 데이터를 더 추가하면됀다.

버튼 누르면 ajax 요청으로 데이터를 가져오고 그것을 game 이라는 state에 추가하는 방법

더보기 버튼을 누르면 "로딩중" 표시해봅니다.

요청이 성공 시 로딩 중 UI

실패 시 로딩 중 UI처리하도록,

이제 데이터 가져오는 것도 있지만 보내는 것도 있습니다,

post요청으로 정보를 전달해서 데이터를 보낼 수 있습니다.

Post요청하는 방법

post 안에 이 '서버URL' 로 id : '아범', pw: 'tiger' 을 전달할 수 있습니다.

이렇게 기본적인 React에서 ajax 요청방법에 대해서 알아보았습니다.

 

 

 

 

 

💪다시 정리

 

🍖 ajax는 ajax가 무엇인지

🍖 왜 사용하는지

🍖 GET방식과 Post방식은 어떤 상황에서 사용하는지에 대해서 명확하게 알고계신다면!

사실 React에서나 제이쿼리나 어느 방면에서도 간단하게 개발하실 수 있을 것같아요!

그럼 다음에 또 개발정리 틈틈히 한 후 돌아오겠습니다. 보시는 여러분께 조금이라도 도움이 되셨으면하며~

이만 뿅~👻