Reactjs

React로 관리자 패널을 만드는 방법 (1)

조회 697 (작성일 2019.08.15 14:48)
- 음성
- 목록

소개

콘텐츠를 표시하는 정적 웹 사이트에서 사용자가 콘텐츠에 액세스하고 상호 작용하는 동적 웹 페이지로 진화 한 웹 응용 프로그램이 많이 있습니다. 이 콘텐츠는 종종 데이터를 주고 받는 API에 의해 구동됩니다.

종종 이 데이터를 정렬하고 처리하려면 관리자 페이지가 필요합니다. 일반적인 방법은 인터페이스를 구축하고 API에 요청을 보내 모든 엔드 포인트를 연결하는 것입니다. react-admin가 도입 될 때까지 이것은 지루한 프로세스였습니다.

react-admin은 Rest, GraphQL 또는 사용자 정의 API를 사용하여 관리 인터페이스를 구축하는 프레임 워크입니다. 또한 애플리케이션 인터페이스 디자인에 사용되는 React 라이브러리 인 Material UI를 테마로 한 스타일 서식에 대해 걱정할 필요가 없습니다. 이 블로그 게시물에서는 react-admin 스캐폴드가 애플리케이션의 관리 인터페이스를 어떻게 구성하는지 학습합니다.

시작하기

새로운 React 프로젝트를 생성하고 다음과 같이 디렉토리에 react-admin을 설치하는 것으로 시작하겠습니다 :

npx create-react-app react-admin-app
cd react-admin-app
# install react-admin
npm install react-admin

포트 3000의 빈 React 앱으로 애플리케이션을 실행해야 합니다.

추측기로 데이터 수정 및 필터링

관리자 페이지에는 CRUD 기능이 있어야 합니다. react-admin이 이를 수행하는 방법을 보여주기 위해 API를 사용할 것입니다. JSONPlaceholder는 예시 용으로 존재하는 더미 REST API입니다. 다음은 가져올 데이터의 샘플입니다.

{
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  }

먼저 react-admin 앱에 JSONPlaceholder를 설치해야 합니다.

npm install ra-data-json-server prop-types

API에서 데이터를 가져 오겠습니다. 이를 위해 react-admin은 루트 구성 요소 인 <Admin>을 사용하여 API와 애플리케이션 간의 데이터 교환을 제공합니다. src/App.js의 기본 구문을 다음과 같이 바꾸십시오.

import React, { Component } from "react";
import { Admin } from "react-admin";
import jsonServerProvider from "ra-data-json-server";

const dataProvider =
  jsonServerProvider("https://jsonplaceholder.typicode.com");

class App extends Component {
  render() {
    return (
      <Admin dataProvider={dataProvider} />
    );
  }
}
export default App;

이 시점에서 npm start를 실행하면 브라우저에 확인 메시지가 있는 앱이 렌더링됩니다.

react admin panel interface

여전히 개발중인 상태에서 react-admin은 "게시자"를 통해 관리 인터페이스를 만듭니다. 추측 자들은 API로부터 데이터를 수신하고 어떤 종류의 데이터인지를 결정한 다음 데이터가 어떤 형식으로 표시되어야 하는지 결정합니다. 추측자를 적용하여 사용자 목록을 표시해 봅시다.

import React, { Component } from "react";
import { Admin, Resource, ListGuesser } from "react-admin";
import jsonServerProvider from "ra-data-json-server";

const dataProvider =
  jsonServerProvider("https://jsonplaceholder.typicode.com");

class App extends Component {
  render() {
    return (
      <Admin dataProvider={dataProvider}>
        <Resource name="users" list={ListGuesser} />
      </Admin>
    );
  }
}
export default App;

위의 코드 블록에서 <resource> 요소는 name 특성을 API의 엔드 포인트에 맵핑합니다. 여기서 <resource>는 users 값을 API에 추가하고 API에서 사용자의 데이터를 가져옵니다. list 속성은 <ListGuesser> 구성 요소를 사용하여 이 데이터를 사용자 목록으로 표시합니다.

display of data in console

<ListGuesser>는 프로덕션 환경에서 사용하기 위한 것이 아니므로 사용자 지정 구성 요소로 교체해야 합니다. 추측의 멋진 기능은 브라우저 콘솔의 API에서 검색 한 데이터 소스 코드를 표시하는 것입니다. <ListGuesser>가 표시하는 내용을 살펴 보겠습니다.

data displayed in console