[ Riot Games API 활용 전적 검색 App 03] - React 프로젝트 시작

• React Project 생성  v 
• ID 검색이 가능하도록 Input Component 구현  v 
• Axios를 통한 Data 요청  v 

01. create-react-app 을 통하여 react 프로젝트생성

create-react-app lol-state

04. id 검색이 가능하도록 Input Component 구현

Riot games API에서 Data를 받아오기 전에, 검색할 아이디를 입력받을 Input Component를 만든다.

  // src/components/ViewSearchID.js
import React from 'react';

const ViewSearchID = () => (
  <div>
      <input type="text" />
      <button>검색</button>
  </div>
);

export default ViewSearchID;

05. axios를 통해 data 받아오기

axios는 JavaScript 프레임워크 내에서 Ajax요청을 도와주는, 현재 가장 인기있는 HTTP 요청 모듈이다. 

npm i axios

프로젝트가 진행되는 root에서 axios를 설치해준다.

// App.js
import React, { Component } from 'react';
import axios from 'axios';
...

위와같이 Component 상단에  import 해주는 형식으로 사용가능하다.

[정리]

오늘은..

lol-state App을 만들기위한 기초작업,

간단한 input 구현,

axios를 통한 Ajax요청,

받아온 Data를 state에 저장

다음 작업땐

bootstrap을 활용해서 대충 스타일링,

불러온 소환사 state 화면 구현,

정도..?

따로뭔가 깊게 하진 않았다.. 시간날때마다. 꾸준하게 해서 꼭 완성시켜보자!!

github 저장소 : https://github.com/RyuJun/lol-state