React-Admin - 설치

React-Admin을 설치해봅니다.

작성자

홍세민

홍세민

MarcusHong

React-Admin (https://github.com/marmelab/react-admin)

REST / GraphQL API 기반의 관리자앱을 구축하기 위한 프론트엔드 프레임워크이다. ES6, React, Material Design을 사용한다. 러닝커브가 있지만 익숙해 진다면 관리자페이지를 좀 더 빠르게 개발할 수 있다.

설치

React-Admin은 React를 사용한다.

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

API

테스트 및 프로토타이밍 용으로 만들어진 jsonplaceholder.typicode.com을 FakeAPI Server로 사용해서 테스트한다.

curl http://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" 
   } 
 } 

데이터 조회

아래와 같이 Resource를 선언하면 React-Admin이 route와 api 호출을 자동으로 만든다.

// in src/App.js
import React from 'react';
import { Admin, Resource } from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';
import { UserList } from './users';

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

export default App;
// in src/users.js
import React from 'react';
import { List, Datagrid, TextField, EmailField } from 'react-admin';

export const UserList = props => (
    <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 const PostEdit = props => (
    <Edit {...props}>
        <SimpleForm>
            <DisabledInput source="id" />
            <TextInput source="title" />
            <LongTextInput source="body" />
        </SimpleForm>
    </Edit>
);

인증

인증 역시 간단히 App.js에서 authProvider를 선언하면 된다.

// in src/App.js
import authProvider from './authProvider';

const App = () => (
    <Admin authProvider={authProvider} dataProvider={dataProvider}>
        // ...
    </Admin>
);
// in src/authProvider.js
import { AUTH_LOGIN, AUTH_LOGOUT, AUTH_ERROR, AUTH_CHECK } from 'react-admin';

export default (type, params) => {
    if (type === AUTH_LOGIN) {
        const { username } = params;
        localStorage.setItem('username', username);
        return Promise.resolve();
    }
    if (type === AUTH_LOGOUT) {
        localStorage.removeItem('username');
        return Promise.resolve();
    }
    if (type === AUTH_ERROR) {
        const { status } = params;
        if (status === 401 || status === 403) {
            localStorage.removeItem('username');
            return Promise.reject();
        }
        return Promise.resolve();
    }
    if (type === AUTH_CHECK) {
        return localStorage.getItem('username')
            ? Promise.resolve()
            : Promise.reject();
    }
    return Promise.reject('Unknown method');
};

모바일 지원

Material UI를 사용하기 때문에 이미 반응형을 지원한다. 또한 모바일 전용으로 출력하는 필드를 구분해서 보여줄 수 있다.

// in src/posts.js
import React from 'react';
import { List, Responsive, SimpleList, Datagrid, TextField, ReferenceField, EditButton } from 'react-admin';

export const PostList = (props) => (
    <List {...props}>
        <Responsive
            small={
                <SimpleList
                    primaryText={record => record.title}
                    secondaryText={record => `${record.views} views`}
                    tertiaryText={record => new Date(record.published_at).toLocaleDateString()}
                />
            }
            medium={
                <Datagrid>
                    <TextField source="id" />
                    <ReferenceField label="User" source="userId" reference="users">
                        <TextField source="name" />
                    </ReferenceField>
                    <TextField source="title" />
                    <TextField source="body" />
                    <EditButton />
                </Datagrid>
            }
        />
    </List>
);

정리

Material UI를 사용한 프레임워크 이기 때문에 어느정도 퀄리티를 보장하는 프레임워크이다. 모바일도 지원되면서 빠르게 개발을 할 수 있으므로 관리자 페이지를 손쉽게 구축할 수 있다. 커스터마이즈를 염두하고 만들어진 프레임워크이기 때문에 document를 참조하면 충분히 프로덕션 용으로 사용할 수 있는 좋은 프레임워크이다.

Tags : react_admin 

comments powered by Disqus