react-admin 알아보기

공부 배경

현재 투입된 프로젝트에서 react-admin 을 처음봤다. 익히 알고 있던 react와는 뭔가 좀 다른 것 같아 처음에 사용할 때 당황했지만, 사용하다보니 편리한 부분이 많은 것 같고 추후 사용할 일이 많을 것 같아 정리하려고 한다.

react-admin ?

관리자 페이지를 편리하게 구현하기 위한 react 기반의 프레임워크이다.
처음에 관리자 페이지가 그래서 뭔데.. 라는 생각이 들었는데

백엔드 API와 연동하여 관리자 패널 또는 대시보드를 빠르고 쉽게 개발할 수 있게 도와주는 도구라고 한다.

관리자 애플리케이션을 구축하는 데 필요한 일반적인 기능 및 컴포넌트를
제공하여 개발자가 데이터 관리와 CRUD 작업을 수행하는 웹 애플리케이션을 빠르게 만들 수 있다.

걍 간단하게 이해하자면 어떤 API를 사용하든지 인터페이스에 맞게 "전달"만 잘 하면 데이터를 쉽게 Fetch 하고 컴포넌트에 데이터를 바인딩할 수 있는 프레임워크라고 생각하면 된다.

처음 react-admin 프레임워크를 사용하면서 전달만 잘 하면 알아서 데이터가 바인딩되어 오.. 편하고 신기하긴하네 라는 생각이 들긴했다.

이제 react-admin에 대한 특징을 파악해보자 !

특징

쉬운 연동
: React-admin은 다양한 백엔드 API와 원활하게 연동할 수 있어, 데이터 관리와 CRUD 작업을 효율적으로 수행할 수 있다.

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

// JSON 서버 API 엔드포인트
const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');

const App = () => (
  <Admin dataProvider={dataProvider}>
    {/* Posts 리소스 설정 */}
    <Resource name="posts" list={ListGuesser} edit={EditGuesser} create={Create} />
  </Admin>
);

export default App;

Resource 컴포넌트를 통해 "posts" 리소스를 정의하고, ListGuesser, EditGuesser, 및 Create 컴포넌트를 사용하여 목록, 편집, 및 생성 페이지를 자동으로 생성하는 것과 같이 기본적인 데이터 관리 애플리케이션을 빠르게 설정할 수 있다.

사전 구현된 컴포넌트
: 데이터 목록, 폼, 필터, 차트, 그리드, 대시보드 레이아웃 등 다양한 사전 구현된 컴포넌트를 제공하여 개발자가 빠르게 애플리케이션을 구축할 수 있다.

사용자 인증 및 권한 관리
: React-admin은 사용자 로그인 및 권한 관리를 손쉽게 설정할 수 있어, 보안을 강화하고 사용자 경험을 개선할 수 있다. 클라이언트 측에서도 일부 권한 관리를 수행할 수도 있다.

import React from 'react';
import { Admin, Resource, List, Datagrid, TextField, SimpleForm, TextInput, EditButton, Create, Edit, DeleteButton } from 'react-admin';

const userPermissions = {
  posts: { view: true, edit: true, create: true, delete: false },
  comments: { view: true, edit: false, create: false, delete: false },
};

// 권한 확인 함수
const checkPermissions = (resource, permission) => {
  return userPermissions[resource] && userPermissions[resource][permission];
};

// 목록 페이지
const PostList = (props) => (
  <List {...props}>
    <Datagrid>
      <TextField source="title" />
      <EditButton basePath="/posts" />
    </Datagrid>
  </List>
);

// 편집 페이지
const PostEdit = (props) => (
  <Edit {...props}>
    <SimpleForm>
      <TextInput source="title" disabled={!checkPermissions('posts', 'edit')} />
    </SimpleForm>
  </Edit>
);

// 생성 페이지
const PostCreate = (props) => (
  <Create {...props}>
    <SimpleForm>
      <TextInput source="title" validate={checkPermissions('posts', 'create') ? undefined : ['required']} />
    </SimpleForm>
  </Create>
);

const App = () => (
  <Admin>
    <Resource name="posts" list={PostList} edit={checkPermissions('posts', 'edit') ? PostEdit : null} create={checkPermissions('posts', 'create') ? PostCreate : null} />
  </Admin>
);

export default App;

근데, 지식이 얕아서 그런가 이 부분에 대해선 깊게 공감은 가지 않는다. 실제 프로덕션 환경에선 어차피 사용 못하지 않을까 ..
그냥 단순히 보조적인 역할만 하는 것 같다. 미미한 장점에 속할듯.

다국어 처리

import React from 'react';
import { Admin, Resource, i18nProvider, List, Datagrid, TextField } from 'react-admin';
import polyglotI18nProvider from 'ra-i18n-polyglot';

const messages = {
  en: {
    resources: {
      posts: {
        name: 'Posts',
        fields: {
          title: 'Title',
          body: 'Body',
        },
      },
    },
  },
  fr: {
    resources: {
      posts: {
        name: 'Articles',
        fields: {
          title: 'Titre',
          body: 'Corps',
        },
      },
    },
  },
};

const i18nProvider = polyglotI18nProvider(locale => messages[locale]);

const data = [
  { id: 1, title: 'Hello World', body: 'This is the body of the post' },
  { id: 2, title: 'Bonjour Monde', body: 'Ceci est le corps de l\'article' },
];

const PostList = (props) => (
  <List {...props}>
    <Datagrid>
      <TextField source="title" />
      <TextField source="body" />
    </Datagrid>
  </List>
);

const App = () => (
  <Admin i18nProvider={i18nProvider}>
    <Resource name="posts" list={PostList} />
  </Admin>
);

export default App;

polyglotI18nProvider를 사용하여 다국어 지원을 활성화하고, 메시지 객체를 정의하여 영어와 프랑스어 메시지를 포함시키게 해준다.

그 후 List 컴포넌트를 생성하고 TextField 컴포넌트를 통해 데이터를 바인딩해주면 이를 통해 데이터가 영어와 프랑스어로 나타나는 것을 볼 수 있다 !

사용 방법

npm install react-admin
또는, yarn add react-admin

Admin 컴포넌트는 dataProvider와 하나 이상의 Resource 컴포넌트를 포함해야한다.

DataProvider

데이터를 가져오고 서버와 통신하기 위한 중요한 부분!

dataProvider는 데이터를 처리하고 API와 상호 작용하기 위한 인터페이스를 제공한다. react-admin은 다양한 종류의 데이터 소스를 지원하며, dataProvider를 통해 이러한 데이터 소스와 통합할 수 있다.

그래서 react-admin이 API와 통신할 때마다 이 객체의 메소드를 호출한다. 메소드 호출을 HTTP request로 바꿔주는 역할을 하고 HTTP Response를 react-admin이 원하는 포맷으로 형식을 바꿔준다.

import { Admin, Resource } from 'react-admin';
import dataProvider from '../myDataProvider';

const App = () => (
    <Admin dataProvider={dataProvider}>
        // ...
    </Admin>
)

Resource

Resource는 react-admin에서 데이터 모델 및 관련된 작업을 정의하는 데 사용되는 컴포넌트다. API endpoint를 CRUD 인터페이스에 매핑시킨다.

Resource는 주요 속성 4가지가 있는데

• name
  : 리소스의 이름으로, 백엔드 API의 엔드포인트와 연결된다. 이 이름은 데이터 소스에서 해당 엔터티를 찾는 데 사용!

• list
  : 리소스의 목록 페이지를 정의하는 컴포넌트. 이 페이지에서는 리소스의 데이터를 표시하고 필터링, 정렬, 페이징 등의 작업을 수행할 수 있다.

• edit
  : 리소스의 편집 페이지를 정의하는 컴포넌트. 이 페이지에서는 리소스의 데이터 수정 가능 !

• create
  : 리소스를 생성하는 페이지를 정의하는 컴포넌트. 새로운 데이터를 추가하는 데 사용.

위의 예시와 같이 Resource를 사용하여 posts라는 리소스를
정의하고, 해당 리소스의 목록(ListGuesser), 편집(EditGuesser), 및 생성(Create) 페이지를 자동으로 생성해줄 수 있다.

단점..?

• 커스터마이징 어려움
  : 기본 설정 이상의 커스텀 레이아웃 및 디자인을 구현하려면 제한적인 부분이 있을 수도 있다.

• 복잡한 데이터 요구사항
  : 매우 복잡한 데이터 요구 사항이 있는 프로젝트의 경우 데이터 구조와 표시에 대한 조정이 어려울 수 있다.

• 번들 크기
  : react-admin은 상대적으로 큰 번들 크기를 가질 수 있으며, 이는 초기 로딩 속도에 영향을 미칠 수 있다고 한다. 따라서 react-admin 사용시 번들 최적화에 주의를 기울여야 할 것 같다.

• 의존성 관리
  : react-admin은 여러 외부 의존성을 가지므로 버전 충돌 및 업데이트 관리가 필요할 수 있다.

마무리

최근 짧게 프로젝트를 왔다 갔다 하다보니 무언가를 짧게라도 공부할 마음의 여유가 없었는데, 얕게나마 업무에서 사용한 프레임워크를 공부하니 왜 그렇게 썼었는지 이해가 가서 좋았다. 앞으로 업무에서 새롭게 마주친 것들을 정리해보는 습관을 들여야겠다.

다음은 Java의 Annotation에 대해 공부해볼 예정. 업무에서 처음보는 Annotation 들이 꽤 있었는데 공부를 해놓으면 업무시 요긴하게 사용하고 이해하기 좋을 것 같다.