AJAX && React

Sang heon lee·2021년 6월 24일

개념 및 기능 정리

목록 보기

2/17

React는 정적(static) 데이터와 함께 사용할 수 있습니다. 하지만 이런 데이터만 사용하는건 금방 지루해지죠...

아마 이런 궁금점이 생길텐데요

Component로 서버사이드 API 데이터를 받아오려면 어떻게 할까요?

사실 React는 View library입니다. 즉 네트워킹 기능을 제공하지 않습니다. 만약 이 사실을 모르고 계셨다면 what react actually is를 읽어보시고 다시 돌아와주세요!

React에는 네트워킹 기능이 없으므로 서버사이드 데이터를 React로 전달하려면 2가지 절차가 필요합니다:

API 데이터 받기
그 데이터를 React로 보내기(props)

이 글에선 서버에서 React로 가는 데이터 흐름을 알아보겠습니다. 우선 서버부터 시작하겠습니다.

Server

서버는 인터넷을 통해 어플리케이션에 데이터를 제공합니다.

서버는 Github API같이 3rd-party API일수도 있고, 아니면 실제 여러분이 운영하고있는 서버일수도 있습니다. 여러분의 서버라면 Rails, Django, Tomcat, Apache 등등 일 수 있겠죠. Express는 Node.js에서만 실행되기 때문에 React 개발자에게 공통된 사항입니다.

JSON

서버에서 브라우저로 데이터를 전송하는 가장 좋은 형식은 JSON입니다.

JSON은 속성 : 값(attribute : value) 으로 구성된 텍스트 기반 데이터 형식입니다. Javascript의 객체와 유사합니다.

JSON의 예시입니다.

{
  "total_count": 47524,
  "items": [
    {
      "name": "react",
      "full_name": "facebook/react",
      "owner": {
        "login": "facebook"
      },
      "description": "A declarative, efficient, and flexible JavaScript library for building user interfaces.",
      "language": "JavaScript"
    },
    {
      "name": "react-native",
      "full_name": "facebook/react-native",
      "owner": {
        "login": "facebook"
      },
      "description": "A framework for building native apps with React.",
      "language": "JavaScript"
    }
  ]
}