React-Admin 리스트에 생성 및 수정 추가하기

지난 글에서 언급했듯 이번에는 리스트에 생성 및  추가 기능을 붙여 보려한다

그전에 지난 글이 궁금하다면 아래 링크 클릭~

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

---

 

먼저 App.tsx 파일에서 import한 react-admin에 EditGuesser를 추가한 후 <Resource name="posts">에 edit={EditGuesser} 를 추가한다

그러면 아래 화면처럼 리스트 열마다 EDIT 버튼이 생성된다 

// in src/App.js

import { Admin, Resource, EditGuesser } from 'react-admin';
import { PostList } from './posts';
import { UserList } from './users';

const App = () => (
    <Admin dataProvider={dataProvider}>/>
        <Resource name="posts" list={PostList} edit={EditGuesser} />
        <Resource name="users" list={UserList} />
    </Admin>
);

 

그리고 이때 console 창을 보면 PostEdit에 대한 코드가 나오는데 이 코드를 덤프하여 <PostEdit> 컴포넌트를 추가해준다

그런 후에 EDIT 버튼을 클릭하면 수정 화면이 나온다

// in src/Posts.tsx

export const PostEdit = (props) => {
  return (
    <Edit {...props}>
      <SimpleForm>
        <TextInput source="id" />
        <ReferenceInput source="userId" reference="users">
          <SelectInput source="name" />
        </ReferenceInput>
        <TextInput source="title" />
        <TextInput multiline source="body" />
      </SimpleForm>
    </Edit>
  )
}

 

다음에는 <PostEdit> 컴포넌트를 복사하여 <PostCreate> 컴포넌트를 추가해준다

// in src/Posts.tsx

export const PostCreate = (props) => {
  return (
    <Create {...props}>
      <SimpleForm>
        <ReferenceInput source="userId" reference="users">
          <SelectInput optionText="name" />
        </ReferenceInput>
        <TextInput source="title" />
        <TextInput multiline source="body" />
      </SimpleForm>
    </Create>
  )
}

<PostCreate> 컴포넌트에서는 <PostEdit> 컴포넌트의 id 요소만 제외하고 나머지 요소들은 복붙해준다

 

이 다음에 만들어둔 <PostCreate> 컴포넌트와 <PostEdit> 컴포넌트를 사용하려면 App.tsx에서 <Resource name="posts">에 edit와 create 속성을 추가해준다

이때 반드시 <PostCreate>와 <PostEdit> 컴포넌트를 import 해줘야한다

 

// 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'
import { PostList, PostEdit, PostCreate } from './Posts'

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

export default App

 

CREATE 버튼을 클릭하여 데이터를 입력하고 SAVE를 하면 아래 이미지처럼 된다

이로써 리스트 생성 및 수정 끝!