[React Admin] 튜토리얼 실습 | B2B관리자 페이지

 Pagination

데이터 목록을 불러와 그리드를 그릴 때 반드시 필요한 것이 페이징 처리를 하는 것이다.

자바스크립트로 직접 구현하려고 하면 페이징 알고리즘 처리와 페이지를 선택할때마다 적절한 Event를 지정해주어야하는 번거로움이 있다. 

하지만, React Admin에서는 간단한 코드 몇 줄로 빠르고 깔끔하게 구현할 수 있다.

// in src/MyPagination.js
import { Pagination } from 'react-admin';

const PostPagination = () => <Pagination rowsPerPageOptions={[10, 25, 50, 100]} />;

위 코드에서 rowsPerPage 옵션은 사용자가 페이지 당 표시할 행 수를 선택할 수 있도록 드롭다운을 렌더링 한다. 

 

이렇게 간단하게 만들어준 PostPagination 컴포넌트를 List에 적용하기위해 간단하게 pagination 속성의 param으로 넘겨주면 된다.

import { List } from 'react-admin';
import PostPagination from './PostPagination';

export const PostList = () => (
    <List pagination={<PostPagination />}>
        ...
    </List>
);

 

 Form

CRUD의 기본인 Form 태그는 웹페이지를 개발할 때 필수 요소이다. 

리액트 어드민은 

<Form>에서 을 record읽고 , 이를 사용하여 RecordContext를 통해 React-hook-form의 defaultValues를 초기화하고 useForm, validate함수 정보를 React-hook-form호환 양식 유효성 검사기로 바꾸고, 입력 유효성 검사가 실패할 때 사용자에게 알리고, <FormProvider>를 통해 양식 컨텍스트를 생성합니다 .

<Form><SimpleForm>, <TabbedForm>및 기타 양식 구성 요소 에서 내부적으로 사용됩니다 .

 

(작성중)

참고자료

https://marmelab.com/react-admin/Tutorial.html