React-Admin 시작하기 - API 앤드포인트를 맵핑하여 List로 보여주기

React-Admin 튜토리얼을 보고 따라해봤다

 

먼저 앞전에 쓴 포스팅 Create React App을 이용하여 React 앱, TypeScript 시작하기를 통해 React 앱을 만든 후 react-admin 패키지를 설치한다

yarn create react-app test-admin
cd test-admin/
yarn add react-admin ra-data-json-server prop-types
yarn start

http://localhost:3000/ 에는 아래 화면처럼 나올 것이다

 

React-admin를 사용하기 위해서는 생성, 검색, 업데이트 및 삭제 (CRUD) 할 수 있어야 한다

그래서 JSONPlaceholder에서 예시용으로 제공해주는 샘플 더미 API를 이용해 연습해 볼 것이다

curl https://jsonplaceholder.typicode.com/users/2

{
  "id": 2,
  "name": "Ervin Howell",
  "username": "Antonette",
  "email": "Shanna@melissa.tv",
  "address": {
    "street": "Victor Plains",
    "suite": "Suite 879",
    "city": "Wisokyburgh",
    "zipcode": "90566-7771",
    "geo": {
      "lat": "-43.9509",
      "lng": "-34.4618"
    }
  },
  "phone": "010-692-6593 x09125",
  "website": "anastasia.net",
  "company": {
    "name": "Deckow-Crist",
    "catchPhrase": "Proactive didactic contingency",
    "bs": "synergize scalable supply-chains"
  }
}

 

먼저 API에서 데이터를 가져올 수 있도록 src/App.tsx의 코드를 아래와 같이 변경해준다

// in src/App.tsx

import React from 'react'
import { Admin } from 'react-admin'
import jsonServerProvider from 'ra-data-json-server'

const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com')
const App = () => {
  return <Admin dataProvider={dataProvider} />
}

export default App

App.tsx의 <Admin>은 루트 요소로 이 컴포넌트는 dataProviderAPI에서 데이터를 가져올 수 있다

 

 

다음에는 <Admin>에 <Resource>를 붙여 API의 앤드 포인트를 맵핑한다

이때 <Resource>의 name을 통해 API의 앤드 포인트가 맵핑되므로 <Resource name="users" />를 추가하여

https://jsonplaceholder.typicode.com/users URL에서 "users"의 데이터를 가져오도록 한다

list={ListGuesser}는 가져온 데이터를 리스트 형태로 보여주도록 해준다

// in src/App.tsx

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

const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com')
const App = () => {
  return (
    <Admin dataProvider={dataProvider}>
      <Resource name="users" list={ListGuesser} />
    </Admin>
  )
}

export default App

 

<ListGuesser>는 프로덕션 환경에서 사용하기위한 것이 아니기에 ListGuesser, users 리소스를 사용자 지정 React 구성 요소로 교체해야한다 이때 console에 있는 데이터 소스를 덤프한다

이 코드를 복사하여 Users.tsx 파일에 UserList를 만들고 App.tsx 파일에서 <Resource>의 list를 수정해준다

화면상 변경되는 사항은 없다

// in src/Users.tsx

import React from 'react'
import { List, Datagrid, TextField, EmailField } from 'react-admin'

const UserList = (props) => {
  return (
    <List {...props}>
      <Datagrid rowClick="edit">
        <TextField source="id" />
        <TextField source="name" />
        <TextField source="username" />
        <EmailField source="email" />
        <TextField source="address.street" />
        <TextField source="phone" />
        <TextField source="website" />
        <TextField source="company.name" />
      </Datagrid>
    </List>
  )
}

export default UserList

// in src/App.tsx

import React from 'react'
import { Admin, Resource } from 'react-admin'
import jsonServerProvider from 'ra-data-json-server'
import UserList from './User'

const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com')
const App = () => {
  return (
    <Admin dataProvider={dataProvider}>
      <Resource name="users" list={UserList} />
    </Admin>
  )
}

export default App

 

다음은 Website 필드가 Text처럼 보이기 때문에 URL처럼 보이도록 필드 타입을 변경해보겠다

이때 필드가 많아 사용 가능한 그리드가 많으므로 Username와 Address Street 2가지 필드를 제거한다

 

Website 필드를 <UrlField>로 변경해 클릭 가능한 링크로 사용할 수 있지만 사용자 정의 필드를 만들어 사용하여 자신의 것으로 바꿀 수 있도록 해본다

// in src/Users.tsx

import React from 'react'
import { List, Datagrid, TextField, EmailField } from 'react-admin'
import MyUrlField from 'MyUrlField'

const UserList = (props) => {
  return (
    <List {...props}>
      <Datagrid rowClick="edit">
        <TextField source="id" />
        <TextField source="name" />
        <EmailField source="email" />
        <TextField source="phone" />
        <MyUrlField source="website" />
        <TextField source="company.name" />
      </Datagrid>
    </List>
  )
}

export default UserList

// in src/MyUrlField.tsx

import React from 'react'

const MyUrlField = ({ record = {}, source }) => {
  return <a href={record[source]}>{record[source]}</a>
}

export default MyUrlField

 

MyUrlField 구성 요소에 밑줄을 제거하고 material-ui를 사용하여 아이콘을 추가해본다

// in src/MyUrlField.tsx

import React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import { Launch } from '@material-ui/icons'

const useStyles = makeStyles({
  link: {
    textDecoration: 'none',
  },
  icon: {
    width: '0.5em',
    paddingLeft: 2,
  },
})
const MyUrlField = ({ record = {}, source }) => {
  const classes = useStyles()

  return (
    <a href={record[source]} className={classes.link}>
      {record[source]}
      <Launch className={classes.icon} />
    </a>
  )
}

export default MyUrlField

 

이렇게해서 https://jsonplaceholder.typicode.com/users URL에서 "Users" 데이터를 가져와 리스트로 보여주는 걸 해보았다

다음에는 https://jsonplaceholder.typicode.com/posts URL에서 "Posts" 데이터를 가져와 리스트로 보여주고 생성 및 편집을 할 수 있도록 해 볼 것이다!