프로젝트 #1 - REACT 를 이용해서 Admin Dashboard - Material UI Table tutorial

 

프로젝트 #1 - REACT 를 이용해서 Admin Dashboard - Material UI Table tutorial

 

이번 포스팅에서는 별도의 페이지를 이용해서 사용자 정보를 보여주도록 한다. 

 

Material UI 테이블 만들기 

 

제일 먼저 userList 를 보여줄 페이지를 생성해 준다.  pages 폴더 밑에 userList.jsx 와 userList.css 파일을 생성한다. 

 

userList.jsx 에서 기본 functional 컴포넌트를 만들어주고 userList.css 를 import 시켜준다. 

UserList.jsx

userList.css

 

지금까지는 home 페이지하나를 가지고 작업했지만 userList 페이지를 추가해주면 url 에 따라서 다른 페이지를 보여주어야한다. react 에서는 이런 페이지 전환을 위해서 react-router-dom 을 사용해서 구현할수 있다. 

 

react-router-dom 에 대한 자세한 내용은 공식 사이트 참고. 

https://v5.reactrouter.com/web/example/basic

 

 

react-router-dom 설치하기 

 

설치가 완료되면 서버를 다시 시작한다. 

 

이제 react-router-dom 을 이용해서 페이지를 재구성한다. app.js 을 열어서 url 에 따라서 다른 컴포넌트를 불러오는 코드를 작성한다. 

참고로, react-router-dom v5 에서는 Switch 를 사용했지만 v6 부터 Switch대신 Routes 를 사용해야한다. 화면을 다시 확인해 보면, 

 

url : localhost:3000/

url : localhost:3000/users

 

url의 값을 보고 다른 component 를 호출해서 화면을 구성한다. UserList 페이지에  material-UI 에 있는 table 을 이용해서 사용자 리스트를 추가한다. material UI 의 테이블 중에 data table 을 사용할 예정이다. 

이 테이블을 사용하기 위해서 x-data-grid 라이브러리가 필요하다. 먼저 라이브러리를 추가한다. 

 

데이터 테이블을 만들기 위해서 material UI 에서 제공해 주는 sample 코드를 사용해서 테이블을 구성한다. 

데이터 테이블이 만들어지고 각 컬럼을 이용해서 정렬도 가능하다.

 

테이블 정보를 수정

테이블의 컬럼 내용을 id, username, email, status, transaction 으로 변경한다. 

그리고 테이블 데이터를 변경된 컬럼 내용에 맞게 수정해서 넣는다. 

테이블 결과

화면에서는 5개의 데이터만 보여지고 다음 페이지로 넘어가면 더 많은 정보를 볼수 있다. 

 

이 테이블에서는 데이터만 불러서 보여주는 것이 아니라 원하는 형태로 렌터링해서 테이블에 보여줄수 있다. username 컬럼을 이용해서 사용자 avatar 함께 보여주는 테이블을 만들수도 있다. 

 

먼저 각각의 데이터에 avatar 필드를 추가해 넣는다. 원하는 이미지 링크를 추가해주면 된다. 

avatar 에 표시된 이미지를 username 과 함께 보여준다. 테이블 셀에 대한 렌터링은 renderCell 을 이용해서 구현할수 있다. usrename 컬럼을 user 컬럼으로 변경하고 다음과 같이 코드를 수정한다. 

table - renderCell

결과 화면 

아직 image 에 대한 css가 적용되지 않아서 위와 같은 정보로 보여준다. css 를 통해서 아바타의 위치와 크기를 조절해 준다.  해당 cell 과 이미지에 대한 className 을 지정하고 css 를 적용한다. 

 

UserList.jsx

userList.css

결과 화면 

 

이제 마지막으로 사용자 정보를 수정/삭제 하기 위한 action 버튼을 추가해보자. action 버튼을 추가하기 위해서 새로운 컬럼을 생성해준다. 

결과 화면 

css 를 이용해서 Edit 버튼과 delete 아이콘을 스타일을 변경해준다. 

여기서 edit 버튼을 클릭하면 해당 row가 선택되는것을 확인할수 있다. edit버튼의 경우 각 개별 유저에 대한 profile 변경에 대한 것이기 때문에 해당 유저를 선택할 필요가 없다. 이 기능을 해제하기 위해서 테이블 생성시에 disableSelectionOnClick 옵션을 추가해주어야 한다. 

이제 delete 버튼에 대한 스타일을 작성한다. 

결과 화면 

현재 테이블은 한 페이지에 5개의 데이터만을 보여주고 있는데, 테이블에 보여지는 데이터 수를 변경하기 위해서 DataGrid 의 값을 변경해준다. 

 

 

userList.jsx 에 있는 데이터를 코드와 분리하기 위해서 dummyData.js 로 옮겨준다. 

 

 

 

데이터가 정상적으로 로딩되는지 확인한다. 

이번에는 edit 버튼을 클릭하면, 해당 유저의 상세 정보를 볼수 있는 링크되는 기능을 추가한다. 이전에 사용했던 react-router-dom 의 Link 를 사용해서 구현가능하다. 

결과 확인 

마우스를 Lucy 의 edit 버튼으로 이동하면, /user/2 링크 정보가 왼쪽하단에 보여진다.  마우스를 클릭하면 /user/2 링크로 이동하는 것을 확인할 수 있다.

 

 삭제 기능 추가하기 

 

데이터 변경 작업을 구현하기 위해서 react hook 을 사용해서 데이터를 관리한다. 

이전과 동일하게 데이터가 화면에 보여지면, 정상적으로 state 를 이용해서 테이블이 생성한 것이다. 이제 setData 함수를 구현해서 데이터를 삭제할 수 있다.  

 

delete 버튼을 누르면 handleDelete 함수가 호출되어야 한다. onClick 함수가 호출되면서 id 정보를 넘겨준다. handleDelete 함수에서 id 를 받아서, 기존 데이터중에서 같은 id 를 제거하고 나머지만 다시 state 에 저장한다. 

 

만약, handleDelete에서 에러가 생긴다면  columns 데이터가 컴포넌트 밖에 있는지 확인하고, 밖에 있다면 UserList() 안쪽으로 이동시킨다. 

 

결과화면: 

버튼을 누르면 사용자 정보가 삭제되는 것을 볼수 있다. 여기서는 실제 dummyData 내용을 수정하는 것이 아니라 state 에 있는 값을 삭제한 것이기 때문에 화면을 refresh 하면 원래의 정보가 다시 보여진다. 

 

 

끝..