React의 API호출

fetch('https://api주소') ← "fetch란 가져오다"

.then(response => response.json()) ← "다음에 ~을 하겠다" | 가지고 온 데이터는 response 인자로 받는다. response를                                                      json파일의 형태로 변환.

.then(json => console.log(json)); ← "다음에 ~을 하겠다"

 

↓결과

{

  "userId" : 1,

  "id" : 1,

  "title" : "hi how are you"

  "completed" : false

}

 

class ApiExample extends React.Component {

 ** class형 컴포넌트는 props를 기본적으로 가지고 있기 때문에 constructor()를 통해 props를 "초기화" 해야 한다.

  ① constructor(props){

    super(props);

    ② this.state = {

      data: "" ← state key에 data 초기값

    ** constructor()에 state 초기값을 넣어준다.

    }

  }

  ③ callApi = () => { ← api를 호출하는 함수를 만든다.

    fetch("https://api주소") ← fetch로 api를 가져옴.

    .then(res => res.json())

    .then(json => {

      this.setState({ ← 불러온 api를 활용해 setState를 만들어 state값을 바꿔준다. 

          data: json.title  ← api로 가지고온 데이터 중 title값을 state data에 넣는다.

    })

  })

  }

  ④ componentDidMount(){

    ** 특정 api를 호출하는 함수를 사용할때는 반드시 componentDidMount함수에 넣어서 사용해야 한다.

    this.callApi();

  }

  ⑤ render(){

    return(

      <h3>

        {this.state.data ? this.state.data : "데이터를 불러오는 중입니다."} ←this.state.data가 비어있다면, 오른쪽 문자열을     출력, 비어있지 않다면 setState를 통해 수정된 data 값을 불러온다.

      </h3>

    );

  }

}

PROCESS

① class형 컴포넌트에서 constructor함수를 통해 prorps값을 초기화

② state 초기값 설정

③ api를 호출하는 함수를 만든다.

④ 위 함수를 componentDidMount 함수에 넣는다.

⑤ render함수에서 HTML을 그려준다.