[React] 리액트에서 서버와 통신하려면 axios 1

서버란

 

유저가 데이터 달라고 요청을 하면 데이터 주는 프로그램

네이버웹툰 서버 : 유저가 웹툰 달라고 하면 웹툰 보내주는 프로그램

유튜브 서버 : 유저가 영상달라고 하면 영상 보내주는 프로그램

→ 서버개발 : "누가 A를 요청하면 A를 보내주세요"라고 코드 짜는 것

 

유저가 그냥 데이터 달라고 하면 서버가 보내주는 것은 아님

서버에 데이터를 요청할때는 정확한 규격에 맞게 요청해야됨

1. 어떤 데이터 인지(URL 형식으로 요청)

2. 어떤 방법으로 요청할지(GET, POST)

 

데이터를 서버에서 가져올때는 보통 GET

데이터를 서버에 보낼때는 보통 POST

어떤 데이터를 보내고 싶은지 URL만 잘 기재하면 됨

 

 

GET / POST 요청하는 법

 

서버에 GET 요청 하는 가장 쉬운 방법은 브라우저 주소창

주소창에 URL 아무거나 적으면 그곳으로 GET 요청 날려줌

 

서버에 POST요청 하고싶으면 <form>태그 이용

<form action=" 요청할URL " method="post"> *url은 서버만든 개발자한테 물어보면 됨

근데 GET,POST 요청을 저렇게 하면 브라우저가 새로고침되버림

 

 

ajax 란

 

서버에 GET/POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 기능

ajax쓰면 새로고침 없이 쇼핑몰 상품을 더 가져올 수도 있고(상품더보기), 새로고침 없이 댓글을 서버로 전송할 수도 있음

 

 

ajax 이용해서 GET/POST 요청하는 법

 

1. axios 라이브러리 설치, import axios

 

 

2. get 요청 - axios.get( 'url' )

요청결과 - axios.get( 'url' ) .then( ( 파라미터 ) => { 파라미터.data }) *data붙여야 실제 data만 출력됨

위의 코드에서 axios.get( ) 메서드는 GET 요청을 보내는 함수, 인자로는 요청 보낼 URL을 전달

.then( ) 메서드는 응답을 받았을 때 수행할 동작을 정의한다. 응답을 받았을 때 실행할 콜백함수를 .then( ) 메서드로 전달한다. 위의 코드에서는 응답 데이터인 'result.data'를 콘솔에 출력하는 동작을 정의

 

 

 

3. ajax 요청 실패할 경우?

axios.get( 'url' ).catch( ( ) => { 실패했을때 출력할 코드 })

 

 

로딩중 만들어보기

 

실제로 ajax 데이터가 큰 경우 로딩하는데 시간 걸릴 수도 있음

 

 

1. 기본값이 false인 state 만들기

 

 

2. 로딩중이라는 UI 만들고 삼항조건문으로 state가 true 일때 보이게, false 일때 안보이게 만들기

 

 

3. 버튼 클릭 했을때 state값 true 로 바껴서 로딩중 UI 보이게 하기 *ajax로 데이터 불러오는 코드 앞에 작성해야됨

 

 

4. ajax가 데이터 가져왔을땐 로딩중 UI 사라져야 하므로 *axios 실행코드 안에 state값 false로 만드는 코드 넣기

혹시 ajax 요청 실패할수도 있으므로 catch 안에도 작성