[React] 쇼핑몰 프로젝트 (5) - Ajax통신[axios], 데이터 받아오기

 

 

서버에서 받아온 데이터를 이용해

상품리스트가 추가로 작성되는

더보기 버튼 기능을 구현해보자

 

const List = (props) => {

  return (
  <div className="col-md-4">
  <Nav.Link href={'detail/'+props.i} style={{display:'inline-block'}}>
  <img src={`https://liverpooll.github.io/data/${props.i}.png`} width="70%" height="200px"/>
  </Nav.Link>
  <h4>{props.player.name}</h4>
  <p>{props.player.age}</p>
  <p>{props.player.position}</p>
</div>
  )
}

 

기존에는

이미지를 상대경로로 지정해서

public 폴더안에 있는 png 파일을 가져왔으나

 

서버에서 데이터를 편하게 받아오기 위해서

직접 

이미지와 객체배열로 구성된 JSON 파일을 배포하여

절대경로로 이미지를 받아왔다.

 

.JSON파일을 이용하는 것과

웹을 배포하는 건 처음이었지만

생각보다 간단해서 놀랐다...

 

 

 

 

더보기 버튼의 소스코드는 다음과 같다.

          <button onClick={() => {
            axios.get('JSON 파일 경로')
            .then((result) => {
              let add_player = [...player];
              let new_player = [...add_player, ...result.data]
              setPlayer(new_player)
              console.log(add_player);
               })
            .catch(() => {
              console.log('실패함');
            })
          }}>더보기
          </button>

 

AJAX 통신방법 세가지

(XML, axios, fetch) 중에서

axios 서버 통신방법을 이용했다.

 

npm install axios 

 

 

axios를 설치해주고

 

get요청으로 URL의 데이터를 요청한 후

정상적으로 데이터를 받아왔을 시에

 

그 데이터의 배열과 기존의 배열을 스프레드연산자로 합쳐준 다음

setPlayer() 인

state 변경함수를 이용해 추가로 바인딩하게끔 만들어줬다.

 

 

 

 

 

 

 

깃허브에 배포된 data1.JSON 파일

 

기존 세명의 선수들은 JS파일 안에

직접 배열을 선언해주었다면

새로 추가될 선수들은 JSON파일의 데이터를 이용했다.

 

 

 

 

 

 

짜잔

 

더보기 기능이 구현되었다.

 

 

 

매일 글을 하나이상씩은 포스팅하려고 하지만

다른공부하면서 막히는게 있으면 오랫동안

끙끙 앓느라

블로그는 뒷전이 된다.

 

 

그래도 꾸준히 포스팅 하려고 노력하자.