Coding Apple, React 강좌 내용 정리.14 - Ajax in React

Ajax (Asynchronous JavaScript and XML)

서버에 새로고침없이 요청을 할 수 있게 해준다

 

• 서버? 누군가 페이지 요청을 하면 페이지를 전송해주는 프로그램
• 요청? 여러 종류가 있으며
• GET : 특정 페이지 / 자료읽기 등 범용적. 주소에 값을 붙여서 보내는 것들
• POST : 주소에 값을 붙이지 않고, 암호같은 중요 정보 전달할 때 사용
• GET / POST 요청 할 때마다 항상 새로 고침됨.

ajax를 쓰면, 새로 고침없이 내용 수정 등이 가능하다.

1. jQuery 설치해서, $.ajax() 사용
2. axios 설치해서 axios.get() 사용
3. 일반 자바스크립트 이용해서 fetch() 사용

이 강의는 2번 axios 설치해서 사용하기로

설치 : npm install axios

<button className="btn btn-primary" onClick={
  ()=> {
    axios.get('https://codingapple1.github.io/shop/data2.json')
                // ajax의 결과를 result에 담아둔다.
                .then( (result)=> {
                  // 요청성공했을 때 처리할 내용
                  console.log(result.data); // result의 결과값
                })
                .catch( ()=> {
                  // 요청실패했을 때 처리할 내용
                  console.log("Failed");
                })
  }}>더 보기</button>

fetch를 이용해도 사용법이 거의 똑같나, JSON (JavaScript Object Notation) 데이터로 가져오나

axios를 쓰면, JSON을 object로 알아서 바꿔준다 <??>

 

받아온 데이터를 추가하기

.then( (result)=> {
    // ajax로 받아온 결과물을 추가
    // 복사본만들기위해, ... 사용, 대괄호를 벗겨라?
    shoes변경( [...shoes, ...result.data ] );
  })

 

받아오고나서, 같은 걸 호출하는걸 막기위해, 호출 url을 바꿔주면 된다.

post를 쓸수도있다.

axios.post('서버url', { id: 'aa', pw: 'bb' } )

처음 상태

결과물

Component내 Component 그리고 Compoenet?

가능하나 복잡해진다.

redux?