React admin체험 일기

이미 진행중이던 프로젝트에 투입이 되어 코드를 훑어 보았는데, 조금 당황스러웠다.

export const PostList = () => (
    <List>
        <Datagrid>
            <TextField source="id" />
            <ReferenceField source="user_id" reference="users" />
            <TextField source="title" />
            <EditButton />
        </Datagrid>
    </List>
);

게시물 리스트를 나타내는건데, 코드가 이런식이었다.

 

코드가 이게 다라고?

 

 

map을 돌려주고있는 것도 아닌데, 리스트에는 여러 데이터들이 들어와있네?

 

 

이사님께서는 react admin을 사용하면 이렇게 짧은 코드로도 구현할 수 있다고 하셨다. 코드가 짧고 단순해 좋아 보일 수 도 있지만, 사실 난 그리 유쾌하진 않았다. 왠지 더 어려워 보였기 때문이었다. react admin의 장점을 깨달으려면 react admin을 쓰지 않고 코드를 짜는 경험이 충분할때 장점을 알 수 있을텐데, 내가 이것을  잘  쓸 수 있을까, 살짝 걱정도 되었다.

 

 

나는 초반에는 급한 마음에 react admin공식문서를 충분히 보지 않고, 내가 아는 지식에서 개발을 진행했다. react admin의 것을 활용하면 되는데.. 괜히 구현을 시도하며 시간을 끌다가 뒤늦게 발견하곤했다. 예를들면 페이지네이션 같은것 말이다.

react admin을 활용하면 페이지네이션을 따로 구현하지 않아도, 이 기능을 추가할 수 가 있다. 

 

 

또 리스트의 상단 헤더도 그랬다. 이건 (러프하게 진행한)프로토타입 인데, 리스트의 상단을 보면 속성이 나온다. 그리고 왼쪽 체크박스를 체크하면 

 

 

리스트의 상단의 속성이 변경된다. 왼쪽에 사용할 수 있는 항목들이 배치가 되는것이다.

 

 

하지만  react admin에서 제공하는 UI기능을 그대로 사용한다면 

ㅎ

 

이런 UI를 사용할 수 있게된다. 별로 예쁘진 않지만, 제공하는 틀 안에서 살짝만 바꿔주면 빠르고 괜찮게 할 수 있을것같다. 

이렇게 배경색을 무난하게 바꿔주고 버튼의 위치를 양쪽으로 바꿔준뒤, 버튼 디자인을 달리 해주기만해도 심플하고 꽤 괜찮아진다. 

 

 

 

그 이후로 react admin공식문서를 매일매일 읽고 있다. react admin을 잘 알고 정리 해보고 싶어 글을 쓴다.

리액트 어드민을 쓰면 이렇게 긴 코드를 아주 짧게 구현할 수 있다.

 

 

리액트어드민이란

React Admin은 React기반의 UI프레임워크이다.

여기서 잠깐!

프레임워크와 라이브러리의 차이점은?

 

프레임워크 (Framework):

• 주도성이 프레임워크에 있습니다. 즉, 어플리케이션의 흐름과 구조를 프레임워크가 결정합니다.

라이브러리 (Library):

• 주도성이 개발자에게 있습니다. 즉, 개발자가 코드의 제어 흐름을 결정하고, 라이브러리를 필요에 따라 호출합니다.

 

 

리액트 어드민은 프레임워크다.

react admin을 사용하면 더 빠르게 데이터 관리 어플리케이션을 구축할 수 있는데, 주로 백엔드 서비스와의 통신, 데이터의 표시 및 편집, 사용자 관리 등 다양한 기능을 제공한다.

핵심기능을 알아보자.

 

 

 

데이터 관리

백엔드 서비스와의 통신을 담당해서, 데이터를 가져오고 업데이트하는 기능을 제공한다. 

지원되는 데이터 제공자 백엔드

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

 

 

 

 

UI컴포넌트

다양한 UI컴포넌트를 제공하고 편집할수 있게 해준다. (react admin에서는 MUI를 사용하고 있다.)

 

 

 

 

라우팅 및 내비게이션

페이지간의 전환 및 네비게이션을 지원한다.

 

 

 

인증 및 권한 관리

사용자 인증 및 권한 관리를 통해 어떤 사용자가 어떤 데이터 및 기능에 접근 할 수 있는지를 제어한다.

 

React Admin은 커스터마이징 하기도 좋고, 사전에 정의된 테마 및 레이아웃을 사용해서 빠르게 어플리케이션을 개발 할 수 있다. 그래서 React Admin을 사용하면 개발자들이 시간을 절약하고 일관된 디자인을 할 수 있게 되는것이다. 나는 회사에서 프론트엔드 개발과 더불어 UIUX도 맡고 있는데,  react admin을 알기전 기획,디자인부터 하게 되어  react admin의 UI는 전혀 고려하지 못했던것이 아쉽다. react admin을 충분히 숙지한 채로 UI기획에 들어갔다면 좀 더 쉽게 갈 수 있었을 거란 생각이든다.

 

그렇다고 또 엄청 아쉬운것은 아니다. react admin에서 제공하는 UI를 최대한 사용한다해도  추후엔 디자인을 바꿔야하는것은 사실이다. 나쁘지 않은 UI인것이지 결코 예쁜 UI는 아니기때문이다. react admin은(UI면에서) 디자이너가 없이 개발을 진행할 때 , 디자인이 산으로 가지 않게 잡아주기에만 훌륭한 정도이다.

 

 

React-admin - My First Project Tutorial

React-admin - My First Project Tutorial

여기가 react admin공식 사이트이다. 

 

 

 

 

Demo 둘러보기

Demo사이트도 있는데 구경해보고 필요한것을 적용해볼 수 있다. 

이건 Demo에서 볼수 있는 리스트이다. 왼쪽에 보면 체크박스가 있는데 

이렇게 체크를 하면 삭제하는 기능까지 다 나온다.

 

 

 

필터기능에, Export까지.. 없는게 없다.

 

 

 

 

 

이렇게 페이지 네이션까지 있다. 이 페이지네이션은 깔끔하고 꽤 훌륭하다. 이걸 쓰지 않고 오른쪽하단에 위치한 페이지네이션을 굳이 굳이 중간에 배치하고 또 여러 옵션으로 오는 디자인들을 삭제하고 또 추가하기에는 시간이 촉박하고, 다른 중요한 일들이 너무 많다. 

 

 

이렇게 세트로 제공하는 페이지네이션을 굳이굳이 다 바꾸는것을 시도하느라 시간을 많이 잡아 먹기도 했는데, 그럴거면 차라리 프레임워크를 사용하지않고 생으로 짜는게 더 빠를지도 모른다.  

 

 

 

 

앞으로 프레임워크를 사용할때는

이 프레임 워크를 무엇을 위해 쓰는지 정확히 파악하고, 사용하려고 하는 프레임워크의 장점이 뭔지, 그래서 어떤부분을 적극 활용해야할지 알고 전체적으로 어느정도 파악이 된 후 코드를 짜기 시작해야겠다. 또 프레임워크를 사용할거면, 먼저 프레임워크의 UI특성을 파악하고 UIUX작업을 해야겠다.

 

좋은 경험과 깨달음이 있어서 좋았다.