07.Ajax for React

---

1.Ajax 란?

서버에 새로고침없이 요청을 할 수 있게 도와주는 일종의 자바스크립트 코드입니다.

• 서버는 누군가 요청을 하면 데이터를 갖다주는 프로그램일 뿐입니다. 예를 들어 네이버 서버는 naver.com으로 요청하면 네이버 메인페이지 갖다주는 프로그래밍일 뿐이고 넷플릭스 서버는 netflix.com으로 요청하면 넷플릭스 메인페이지 갖다주는 프로그램일 뿐입니다.

• 요청은 그냥 서버에 요청하는 방법을 뜻합니다.

GET, POST 이런 요청방법이 있습니다.

• GET : 데이터, 웹페이지 같은걸 읽고싶을 때 하는 요청입니다. (쉽게 말해서 브라우저 주소창이 바로 GET 요천하는 공간입니다)

• POST : 데이터를 서버로 보내고 싶을 때 하는 요청입니다.

그럼 Ajax는 뭐냐면 GET,POST 이런걸 새로고침 없이 할 수 있게 도와주는 코드입니다.

원래 GET, POST 요청을 하시면 새로고침이 됩니다. 근데 새로고침 없이 할 수 있게 도와주는게 바로 Ajax입니다.

2.axios 설치 및 사용법

• rect 에서 Ajax 는 주로 axios 라이브러리를 사용해서 Ajax 를 다룹니다.

$ yarn add axios

// import axios
import axios from 'axios';

• axios 적용

// 버튼을 클릭하면 axios 를 통해 정보를 가져오는 code

import axios from 'axios';

function App(){
  
  return (
    <button className="btn btn-primary" onClick={()=>{

      axios.get('GET요청할URL');

    }}>더보기</button>
  )
}

• GET 요청할 URL 은 주로 .json 파일 형식으로 웹 주소를 링크해주게 되면 json 정보를 가져 올 수 있습니다

• sample 로 작성된 json 형태의 URL 을 가져오는 경우는 아래와 같습니다.

---

// 버튼을 클릭하면 axios 를 통해 정보를 가져오는 code

import axios from 'axios';

function App(){
  
  return (
    <button className="btn btn-primary" onClick={()=>{

      axios.get('https://codingapple1.github.io/shop/data2.json')
      .then(() => {}) // 요청성공할 경우 실행할 코드
      .catch(() => {}) // 요청 실패시 실행할 코드

    }}>더보기</button>
  )
}

• 요청시 성공 or 실패 시 실행 할 코드를 담아서 실행 할 수 있습니다.

---

<button className="btn btn-primary" onClick={() => {

  axios.get('https://codingapple1.github.io/shop/data2.json')
  .then((result) => {console.log(result.data)}) // 요청성공할 경우 실행할 코드
  .catch(() => {}) // 요청 실패시 실행할 코드
  
}}>더보기</button>

• axios로 받아온 data 를 console 창에 띄워서 확인하기

---

기존의 state code 에서 axios.get() 으로 기존 데이터에 추가 시키기 (전개 연산자 이용해서 합치기)

<button className="btn btn-primary" onClick={() => {

  axios.get('https://codingapple1.github.io/shop/data2.json')
  .then((result) => {editShoes([...shoes, ...result.data])}) // 전개 연산자로 기존 data 합치기
  .catch(() => {}) // 요청 실패시 실행할 코드
  
}}>더보기</button>

• 직접 원본에 push 하는것이 아니라. 새로운것을 copy 해서 만들어서 사용함

3.추가로 고민해볼 사항들

Q. 더보기로 보여줄 상품이 3개 밖에 없습니다. 근데 사용자가 버튼을 또 누르면 어쩌죠? A. 보여줄 상품의 마지막에 도달했을 시 버튼을 숨기거나 하시면 됩니다.

// UI 보일수 있는 state 생성
let [btnDetail, editBtnDetail] = useState(true);


// 삼항 연산자로 조건문을 만들어서 axios 를 받고 다음 클릭하지 못하게 detail 버튼이 없어지게 만듬
{
  btnDetail === true
  ? (<button className="btn btn-primary" onClick={() => {
    axios.get('https://codingapple1.github.io/shop/data2.json')
    .then((result) => {editShoes([...shoes, ...result.data])}) // 요청성공할 경우 실행할 코드
    .then(() => {editBtnDetail(false)})
    .catch(() => {}) // 요청 실패시 실행할 코드
  }}>더보기</button>
  )

  : null
}

Q. 지금 ‘어쩌구/data2.json’ 으로 요청했는데 버튼을 또 누르면 ‘어쩌구/data3.json’ 으로 요청하게 하려면? A. 그건 axios.get()안의 경로를 작성하실 때 하드코딩하지 말고 버튼을 1회 누르면 data2.json, 2회누르면 data3.json 이 경로로 요청하도록 코드를 바꿔주시면 되겠네요. 버튼 누른 횟수를 변수나 state에 저장하시면 편리하겠군요.

Q. 실패했을 경우 어쩌죠? A. catch() 함수 안에 실행 원하는 코드를 담으시면 됩니다. “요청실패시 사용자에게 알림창 UI를 보여줍니다~” 이런 코드도 괜찮겠네요.

4.서버에 데이터를 보내는 POST 요청하는법

가끔은 데이터를 받아오는게 아니라 서버로 전송하기도 해야합니다.

로그인할 때, 검색할 때, 게시물을 발행할 때… 이런 경우입니다.

서버로 데이터를 전송하시려면 POST 요청을 하시면 됩니다.

POST 요청은 데이터 전송할 URL과 전송할 데이터 이 두가지 항목을 입력하실 수 있습니다.

axios.post('https://codingapple1.github.io/shop/data2.json', { id : 'test', pw : 1234})
  .then((result)=>{  })
  .catch(()=>{ })

• get 대신 post 라는 함수를 쓰면되고 URL 옆에 두번째 parameter 로 원하는 데이터를 입력해주면 됩니다. 그럼 전송됩니다.

• POST 요청도 마찬가지로 요청/성공 실패의 경우가 있으며 역시 then, catch 함수 안에서 우너하는 바를 실행해주면 됩니다

5.페이지 방문하자마자 Ajax요청을 실행하고 싶으면

Ajax를 이용해서 페이지 내용을 받아오거나 그럴 때가 있습니다.

useEffect() 컴포넌트는 등장시 / 업데이트시 실행되는 함수이니까 useEffect() 안에서 axios 를 사용하면 페이지 로딩때 Ajax 요청을 할 수 있게 됨

// sample

function App(){
  
  useEffect(()=>{
    axios.get().then().catch();
  },[]);
  return (
    <div>
    </div>
  )
}

🔶 🔷 📌 🔑

Reference

• react Ajax- https://reactjs.org/docs/faq-ajax.html

• coding apple - https://online.codingapple.com/course/react-basic/