React Ajax

Ajax

서버에 새로고침없이 요청을 할 수 있게 도와줌

1.제이쿼리 - $.ajax()

2.axios - axios.get()

3.자바스크립트 -  fetch()

등을 사용한다.

 

React는 axios 라이브러리를 사용한다.

 

요청종류

GET : 특정페이지 / 자료읽기

->브라우저 URL에 넣으면 그냥 get요청임

POST: 로그인같은 서버로 중요 전보 전달할 때

 

---

yarn add axios
npm install axios

ps. 아래와같이 전부 ""로 되어있는 자료는 json형이라고한다. 오브젝트 자료형이 아님 하지만 출력은 다시 object로바뀜

[
  {
    "id": 3,
    "title": "Flowey",
    "content": "only 5 inches",
    "price": 120000
  },
  {
    "id": 4,
    "title": "Baby shoes",
    "content": "for less than 6",
    "price": 120000
  },
  {
    "id": 5,
    "title": "Red Herring",
    "content": "Born in France",
    "price": 120000
  }
]

axios를 사용하려면 상단에 import를 해와야한다

 

버튼을 누르면 axios요청이오게 button에 onClick이벤트를 주고 그안에 콜백함수로 axios를 넣어준다.

 

import axios from 'axios';

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

    // post설정방법
    axios.post('서버URL',{id:'flykimjiwon',pw:123456})

    //로딩중이라고 UI 띄우게하기

    // 데이터 요청할 URL 적으면됨
    axios.get('https://codingapple1.github.io/shop/data2.json')
    .then((result)=>{//성공하면실행

      //로딩중이라고 UI 안띄우게하기 
      console.log(result.data)
      console.log('성공')
      shoes변경([...shoes,...result.data]) //...연산자는 괄호를 벗겨준다.
      // [{},{},{}] 원래이렇게 생겼던거 [ 벗겨서 나열하게됨] []안에다가 [{}{}{},{}{}{}]일케됨
      // var newarray = [...shoes]
      // newarray.push(result.data)
      // shoes변경(newarray)
      
      // 횟수 저장해두고싶으면 변수로 카운트 저장해두면됨 state변수를 주소에 넣어줘도되구{}로
    })
    .catch(()=>{ //실패하면실행
      //로딩중이라고 UI 안띄우게하기 
      console.log('실패')
    })

  }}>더보기</button>

중요한부분은

axios.get('가져올요청주소')
    .then((result)=>{//성공하면실행

      console.log(result.data)
      console.log('성공')
   
    })
    .catch(()=>{ //실패하면실행
      
      console.log('실패')
    })

이 부분이다. 요약하면

 

axios.get에 가져올 주소를넣고 .then에는 파라미터를 넣어주면된다.

그리고 그 파라미터의 data를 가져오면 성공!

.then은성공시, .cath는 실패시 함수가 실행되는 부분이다.

 

순수 자바스크립트에선 fetch를 사용하지만 react에서는 axios를 사용하면됨

 

---

그외 post설정방법

// post설정방법
    axios.post('서버URL',{id:'flykimjiwon',pw:123456})

그리고 UI같은거는 axios바깥과 안쪽에 적절하게 on/off형식으로 넣어주면된다 이것도 useState로 처리할 수 있다.

 

그리고 json파일이나 불러온 데이터의 자료가 끝이나면 변수로 카운트같은것을 넣어줘 더이상 작동안하게 하거나

 

버튼이 사라지게 하면 될것이다. 그리고 {} 를이용헤 axios의 불러오는주소안에 변수를 바꿔 만들수도 있을것이다.

 

example1.json같은경우 ..../example'+{}+'.json'처럼 말이다.

 

---

다른페이지, 컴포넌트에서 ajax를 사용하는방법

 

 useEffect(()=>{
    // 이런 detail페이지에서 ajax가져오고싶으면 useEffect에서 쓰면된다.
    axios.get()
    return ()=>{}
  },[])
  // 여기 업데이트시에 실행안되게 체크

 

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

이와같이 useEffect를 사용하면된다 이안에서 똑같은 사용법으로 axios를 사용하면되고

 

특정 state에서만 실행하고싶으면 맨뒤에 ,[]를 사용해주면된다.