[React] 서버와 통신하려면 ajax

 

 

상품이 진열되어있는 화면에 상품 더보기 버튼을 눌러 데이터를 받아오기

 

 

이를 위해서 서버에 ajax 문법을 통해서 데이터를 요청 할 수 있다.

 

 

서버에 데이터를 요청 하다.

 

서버 : 누가 데이터를 요청하면 데이터를 제공해주는 프로그램.

 

ex)

Youtube 서버: 동영상 요청하면 진짜 보내주는 프로그램

 

네이버 웹툰 서버: 웹툰 요청하면 진짜 보내주는 프로그램

 

서버 개발시 짜는 코드: 누가 A 요청하면 A 보내주는 코드

 

 

서버에 데이터를 요청할 때 그냥 때쓴다고 주지 않고

 

'정확한 규격'에 맞는 요청을 해야 데이터를 전송해 준다.

 

1. 어떠한 방법으로 2. 어떤 자료를 보내달라. 를 정확한 규격으로 보내야 한다.

 

어떤 방법은 get 이나 post 에서 골라야 한다.

 

어떤 자료는 URL 이다.

 

 

어떤 자료를 받고 싶을 때 GET 요청을 통해서 서버에서 받을 수 있으며

 

어떤 데이터를 서버에 저장하고 싶을때 POST 요청을 통해서 저장 할 수 있다.

즉 데이터를 받고 싶을때 GET으로 요청을 하고 데이터를 보내고 싶을때 POST로 요청을 한다.

 

서버 개발시 짜는 코드 :

 

"누가 comic.naver.com 으로 get요청하면 웹툰 보내주세요~" 라는 코드를 짜는것.

 

get 요청을 가장 쉬운 방법 주소에 해당 정보를 치는것.

 

 

react 의 ajax 를 사용해도 Get 요청이 가능하다.

 

주소에 해당 get 요청을 하게 되면 새로고침이 되지만 ajax는 그 화면에 새로고침 없이 get / post 가능

 

ajax 쓰려면 옵션 3개중 택1

1. XMLHttpRequest(옛날 자바 스크립트 문법)

 

2. fetch()  요즘 자바 스크립트 문법

 

3. axios  외부 라이브러리 이용 방법

 

우리는 3번을 이용할 것이다!

 

npm install axios

	or
    
yarn add axios

 

버튼 onClick에 axios를 넣고 get을 통해 데이터 요청을 할 URL을 넣어준다.

 

그후 .then 을 통해서 데이터를 받고 그 data를 콘솔에 출력해 주면 아래와 같은 데이터 들이 보인다.

 

요청 결과 : axios.get('url').then()

저 정보들 중에서 우리가 필요한 핵심 정보들은 data 어레이에 따로 담겨있다.

 

console.log(data.data); 로 해주면 해당 원하는 값이 나올것이다.

 

여기서 then 안에 있는 data는 작명된 파라미터 이름이므로 다른거로 수정해도 된다.ex) (a)=>{console.log(a.data)}

 

.then 뒤에 .catch 를 붙여서 ajax 실패시 동작도 넣을 수 있다.(예외처리)

 

ajax 통신을 통해서 받아온 배열 데이터 값을 기존의 상품 데이터에 추가해보자.

 

기존의 shoes 상품들을 나열하는 html 이다.

shoes 의 배열을 map 을 통해서 화면에 보여주고 있다.

shoes 라는 데이터 배열에 set 함수를 이용해서 데이터를 추가해주면 된다.

 

데이터를 조작하고자 할때 어떻게 해야할지 감이 안온다면 일차적으로 console에 찍어봐라!!

 

버튼을 눌러 데이터를 출력해 봤을 때

 

이런식으로 출력되며 목표는 6개의 object 리터럴을 갖는 배열이다.

 

그럼 어떻게 배열에 object가 가득한 애들끼리 더 해줘야 할까??

 

concat 을 써주면 된다!

 

한가지 문제가 생겼다. 나는 shoesImg 를 public 에 넣어서 관리했고 배열 object에 따로 추가했는데 다시 바꿔줘야 겠다.

 

그런데 생각보다 많은 문제에 봉착했다.

 

이미지를 나타내는 html 부분에 shoes 이미지 URL 이 끝에 1,2,3 등으로 끝났다

 

index 값이 0,1,2 이므로 1을 더해줘야 했는데

 

계속 사진에서 에러가 떴다.

 

보니까 이미지가 shoes21 shoes11 shoes01 등으로 에러가 났다.

 

딱보니까 아 props.i 가 타입이 String 이구나 싶었다.

 

타입을 찍어보니 String 이 나옴

 

이때 javaScript 의 자동 형변환 성질을 이용했다.

숫자를 스트링으로 바꾸는건

 

let num = 2

num += "";

console.log(typeof(num)); // String

 

숫자에 문자열을 더하면 문자로 자동 형변환 되는 성질

 

마찬가지로 문자열에서 숫자로 바꿀수 있는 방법이 있다.

 

let str = "2"

str*=1;

console.log(typeof(str)); // number

 

문자열에 1을 곱한 후에 +1 을 더해주면 숫자형태로 바뀐 상태에서 계산이 된다.

 

concat을 안쓰고 더해주는 방법도 있다.

 

카피 라는 변수에 각 shoes 와 getData.data 의 배열을 벗겨 한 배열에 담아주면 된다.

(blog 만들때 배열에 하나의 데이터 값 추가할때 비교해보면 좋을듯)

 

\

하나 다르다면 데이터 값이 아닌 배열을 추가하는 것이기 때문에 위의 동작대로 바로 작동은 어렵고

한번 배열을 변수에 담고 나서 set에 넣어야 한다.

 

 

여기서 응용!

방금 받아온 데이터가 data 3번 까지 있다고 가정할 때 어떻게 받는게 좋을까

data 3번을 가져오고 싶다

 

즉 한번 버튼 눌렀을때 2번이 들어오지만 다음번에는 3번을 가져오고 싶다!

처음 누를땐 초기값이 2인 urlData 라는 변수를 넣어주면 된다.

그리고 버튼 누를 때마다 urlData를 하나씩 올려주면 된다.

 

 

 

 

 

 

 

출처 : 코딩애플 React 강의입니다.

스스로 생각해서 코드를 직접 짜보게끔 많이 유도해주시고 강의 설명도 이해가 쉽게 설명해주십니다.

https://codingapple.com/