React | 리액트에서 RESTful API 사용해보기

이 포스팅은 How to consume a RESTful API in React 영어 원문을 참조하여 한글로 작성하였습니다.

리액트 프로젝트 세팅

새 프로젝트 생성

먼저 npx create-react-app react_api_practice 명령어로 새 리액트 프로젝트를 만들어주었다.

프로젝트 세팅

1. index.html의 head안에 Bootstrap 스타일시트 적용

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

2. App.js 수정

 import React, {Component} from 'react';

    class App extends Component {
      render () {
        return (
          // JSX to render goes here...
        );
      }
    }

    export default App;

3. src폴더에 하위 폴더 components를 만들고 contacts.js 생성
   아래 보일러플레이트 복사, 붙여넣기

import React from "react";

const Contacts = ({ contacts }) => {
  return (
    <div>
      <center>
        <h1>연락처 목록</h1>
      </center>
      {contacts.map((contact) => (
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">이름: {contact.name}</h5>
            <h6 class="card-subtitle mb-2 text-muted">
              이메일: {contact.email}
            </h6>
            <p class="card-text">소속: {contact.company.name}</p>
          </div>
        </div>
      ))}
    </div>
  );
};

export default Contacts;

4. App.js에 API 불러오기 & contacts.js 임포트

import React, { Component } from "react";
import Contacts from "./components/contacts";

class App extends Component {
  state = {
    contacts: [],
  };
  componentDidMount() {
    fetch("http://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((data) => {
        this.setState({ contacts: data });
      })
      .catch(console.log);
  }
  render() {
    return <Contacts contacts={this.state.contacts} />;
  }
}

export default App;

---

RESTful API 파해쳐보기

 componentDidMount() {
    fetch("http://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((data) => {
        this.setState({ contacts: data });
      })
      .catch(console.log);
  }

• componentDidMount: 구성 요소가 마운트되는 즉시 API 요청을 수행
• fetch("http://jsonplaceholder.typicode.com/users"): GET 요청을 보낼 주소
• .then((res) => res.json()): json이라는 데이터타입을 가져와 사용한단 의미
• .then((data) => { this.setState({ contacts: data }); }): API에서 어떤 값을 호출해와서 출력할 것인지
• .catch(console.log);: 요청이 정상적으로 출력되지 않을 때 콘솔에 오류를 출력

---

참조

가상 API http://jsonplaceholder.typicode.com/users
전체 코드 https://github.com/heyiminhye/react_api_practice