[React] React 에서 Ajax 요청하기

💡 실습 포인트!

• 이번에는 GET 요청을 통해 받아온 데이터를 가지고 "상품 더보기" 버튼을 눌렀을 때 상품 레이아웃에 해당 데이터들이 추가되도록 만들어보았다.

---

💜 Ajax 알아보기

• Ajax 는 서버에 새로고침 없이 요청을 할 수 있게 도와주는 일종의 JavaScript 코드이다.
• 서버란 누군가가 특정 URL 로 요청을 하면 데이터를 가져다주는 프로그램 정도로 이해하면 편하다.
• 요청이란 서버에 GET, POST 등과 같이 요청하는 방법을 의미하는데 사실 웹탐색, 로그인, 검색 등을 GET, POST 요청을 통해 진행한다.
  • GET : 데이터, 웹페이지 같은 것을 읽고 싶을 때 서버에 보내는 요청을 의미하며, 대표적인 GET 요청으로는 브라우저 주소창에 URL 을 입력하는 행위 등이 있다.
  • POST : 데이터를 서버로 보내고 싶을 때 서버에 보내는 요청을 의미하며, 대표적인 POST 요청으로는 특정 사이트에서 로그인하는 행위나 댓글을 남기는 행위 등이 있다.
• 즉, 원래는 GET, POST 와 같은 요청을 하면 강제로 페이지가 새로고침되지만, Ajax 를 통해 이러한 요청들을 새로고침 없이 할 수 있게 되는 것이다.

🤍 Ajax 사용 방법 알아보기

• Ajax 를 사용하는 방법은 다양하다.
  • jQuery Ajax 를 사용한다.
  • axios 를 설치해서 사용한다.
  • JavaScript fetch() 를 사용한다.
• React 개발환경에서는 주로 axios 와 fetch() 를 많이 사용한다.

---

🤍 Ajax 사용을 위해 axios 설치하기

// npm 을 이용하는 경우
npm install axios

// yarn 을 이용하는 경우
yarn add axios

• 위의 코드 중 하나를 택해서 터미널에 입력하면 axios 가 설치된다.

import axios from 'axios';

• axios 설치가 완료되면 사용하고자 하는 파일 최상단에 위와 같이 코드를 작성하여 import 해준다.

---

💜 "상품 더보기" 버튼 및 기능 만들기

🤍 "상품 더보기" 버튼 UI 만들기

• "상품 더보기" 버튼을 만들어서, 이 버튼을 누르면 상품 3개를 더 보여줄 수 있도록 해보았다.

import axios from 'axios';

function App(){
  
  return (
    <button className="btn btn-primary">상품 더보기</button>
  )
}

• 먼저 적당한 위치에 위와 같이 button 태그를 추가해주면 된다.

• 그럼 위와 같이 적당한 위치에 "상품 더보기" 버튼이 생긴다.

---

🤍 "상품 더보기" 버튼을 누르면 GET 요청하도록 하기

import axios from 'axios';

function App(){
  
  return (
    <button className="btn btn-primary" onClick={()=>{
      axios.get('https://codingapple1.github.io/shop/data2.json');
    }}>상품 더보기</button>
  )
}

• 강사님이  https://codingapple1.github.io/shop/data2.json 경로에 이미 데이터를 만들어두신 상태라 해당 경로로 GET 요청을 해주었다.

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>
  )
}

• 이제 GET 요청을 통해 가져온 데이터를 출력하고 싶으면 위와 같이 작성하면 된다.
• .get() 함수를 사용하면 바로 뒤에 .then() 과 .catch() 와 같은 함수를 연달아 붙일 수 있다.
• 각 함수에는 요청 성공 혹은 요청 실패 시 실행할 코드를 작성해주면 된다.

import axios from 'axios';

function App(){
  
  return (
    <button className="btn btn-primary" onClick={()=>{
      axios.get('https://codingapple1.github.io/shop/data2.json')
      .then((result)=>{ console.log(result.data) })
      .catch(()=>{ 요청 실패 시 실행할 코드 })
    }}>상품 더보기</button>
  )
}

• 요청이 성공했을 때 데이터를 출력해보고 싶으면 위와 같이 .then() 안의 코드를 수정해주면 된다.
• .then() 안의 콜백함수 안에 파라미터(result) 를 추가하여 콘솔창에 출력해보면 그게 바로 받아온 데이터이다.
• 그리고 object 타입의 데이터를 확인해보면 필요로 하는 데이터뿐만 아니라 요청이 성공한 이유 등 여러가지 데이터가 들어있는데 필요한 부분만 꺼내어 사용하면 된다.
  (나는 result 에 담긴 데이터 중 data 부분만 필요해서 result.data 만 사용했다.)

 

• 일반 JavaScript 문법인 fetch() 문법도 거의 비슷하게 사용 가능하다.
• fetch(요청할 URL) 과 같이 사용하면 바로 GET 요청을 해주며, 그 뒤에 .then() 을 붙일 수 있는 것도 동일하다.
• 단, 가져온 자료가 JSON 의 형태라면 axios 는 자동으로 object 타입으로 변환해주지만, fetch() 는 자동 변환이 되지 않는다.

---

🤍 GET 요청으로 받아온 데이터로 상품 레이아웃 3개 추가하기

• 이제 GET 요청으로 받아온 데이터로 상품 레이아웃을 추가해보았다.
• 상품 레이아웃은 이미 Grid Component 와 map() 함수로 만들어두었기 때문에 shoes 라는 state 안에 받아온 데이터를 추가만 해주면 map() 함수를 통해 상품 레이아웃이 추가된다.

function App() {

  let [shoes, setShoes] = useState(Data);

  return (
    <div className="App">

          <Route exact path='/'>
            <Main shoes={shoes} setShoes={setShoes} />
          </Route>

    </div>
  );
}

• 이전에 shoes 라는 state 만 사용할 예정이었기 때문에 shoes 라는 state 만 shoes 라는 변수명으로 전송받아왔는데, 이번에는 setShoes 라는 state 도 사용해야 해서 setShoes 라는 변수명으로 setShoes 라는 state 도 전송받아왔다.

import axios from 'axios';

function App(){
  
  return (
    <button className="btn btn-primary" onClick={()=>{
      axios.get('https://codingapple1.github.io/shop/data2.json')
      .then((result)=>{
          let newData = result.data;
          props.setShoes([...props.shoes, ...newData]); 
      })
      .catch(()=>{ 요청 실패 시 실행할 코드 })
    }}>상품 더보기</button>
  )
}

• then() 안에 Ajax 가 성공했을 때의 코드를 작성해주었다.
• 이전에는 array 자료형의 state 에 데이터를 추가할 때, 원본 array 를 복사하여 새 변수에 할당해준 다음 그 변수에 새로운 데이터를 넣어 state 변경 함수에 담아주었었다.
• 이번에는 새롭고 덜 번거로운 방식인 spread 문법을 활용했다.
• [...props.shoes, ...newData] 와 같이 작성하면 각 props.shoes 의 자료와 newData 의 자료의 괄호를 벗겨내어 데이터 하나하나를 대괄호로 감싸서 array 자료형으로 만들어준다.
• 이렇게 만들면 별도의 사본을 만드는 번거로운 과정 없이 편하게 데이터를 추가하는 것이 가능하다.