React Admin
이번 프로젝트에서 React Admin을 사용하게 되어, 개념과 핵심기능을 정리합니다..!
리액트 기반 프레임워크로, B2B 관리자 페이지 제공 서비스에 집중하였습니다.
대표적으로, E-commerce Admin, CRM, HelpDesk, Media player 등 과같은 웹페이지를 만들 수 있습니다.
리액트 어드민과 첫 만남은,, 한마디로 잡을 수 없는 끈 느낌이었습니다...
공식 홈이 참고할 수 있는 거의 유일한 친구였는데, 참고 코드나 설명이 부족한 느낌이 많았습니다. 그래서 내가 이해한 RA(react-admin)을 소개하고자 합니다.!
주요 특징
- 단일페이지 앱 개발 속도를 높이고 촉진하기 위해 만들어진 프레임워크
- 쉬운 CRUD 페이지 구축
- 인증 및 승인에 있어서 API의 구애를 받지 않음
- 관계형 API를 활용해 reference 레코드를 표시할 수 있음(1:N, 1:1, N:N 관계 지원)
- Material UI 사용
- React-hook-form 기반 Form 양식 제공
쉽게 생각하면, 흩어져있는 React 라이브러리들을 효율적으로 모아 조금 더 편하고 빠르게 사용할 수 있도록 포장해 놓은 제품인 것 같습니다.
설치
공식사이트(https://marmelab.com/react-admin/)에서 참고하여 설치를 진행했습니다.
Typescript 언어로 React 앱 생성
우선, Typescript 리액트 생성 후 해당 경로에 접근해 react admin 프레임워크 설치 수행 했습니다
뼈대를 먼저 만들어야죠~!
yarn create react-app my-admin --template typescript
cd my-admin
yarn add react-admin ra-data-json-server
API 연결 동작 테스트
// in src/admin/index.tsx
import { Admin, Resource, ListGuesser } from "react-admin";
import jsonServerProvider from "ra-data-json-server";
const dataProvider = jsonServerProvider("https://jsonplaceholder.typicode.com");
const App = () => (
<Admin dataProvider={dataProvider}>
<Resource name="posts" list={ListGuesser} />
<Resource name="comments" list={ListGuesser} />
</Admin>
);
export default App;
백엔드의 API 기능을 호출해 연결하기 위해 꼭알아야하는 핵심 개념입니다.
대표적인 API 테스트 사이트를 사용해 연결이 제대로 동작하는지 확인하였습니다.
dataProvider 와 Resource 옵션 설정으로 CRUD페이지를 간단하게 만들 수 있었습니다..!
화면출력 결과
App Configuration
DataProvider
- 테이터를 처리하고 API와 상호작용하기 위한 인터페이스를 제공함
- dataProvider를 통해 다양한 종류의 데이터 소스와 통합할 수 있음
- 메소드 호출을 HTTP Request로 바꿔주는 역할, Response를 원하는 포멧으로 변환해주는 역할
Resource
- 데이터 모델 관련 작업을 정의
- API 엔드포인트를 CRUD 인터페이스에 맵핑시킴
- 주요 속성 4가지
- name : 백엔드 API의 엔드포인트와 연결됨, 데이터 소스에서 해당 엔터티를 찾는데 사용
- list : 리소스 목록 페이지 정의, 리소스 데이터를 표시/필터링/정렬/페이징 등의 작업 수행 가능
- edit : 리소스의 편집 페이지 정의, 리소스의 데이터 수정 가능
- create : 리소스를 생성하는 페이지 정의, 새로운 데이터 추가 가능
추가적으로 이야기하자면, 실무에서 사용할때는 ListGuesser를 사용하지 않았고 아래 코드와 같이 list, edit, create 화면을 각각 만들어서 해당 화면을 경로로 연결해주었습니다.
import { Admin, Resource } from "react-admin";
import jsonServerProvider from "ra-data-json-server";
import { customList, customCreate, customEdit } from "./users";
const dataProvider = jsonServerProvider("${백엔드 API 경로}");
const App = () => (
<Admin dataProvider={dataProvider}>
<Resource name="${api 상세 경로}" list={customList} create={customCreate} edit={customEdit}/>
</Admin>
);
export default App;
대표적인 개념을 바탕으로 실습을 진행해보았습니다.
2024.03.11 - [React] - [React Admin] 튜토리얼 실습 | B2B관리자 페이지
참고자료
https://marmelab.com/react-admin