[TIL] 22.04.15 -MUI datagrid switch button 추가, React 라우팅과 path설정, input multiple 속성 mui textfield에서 사용방법

오늘 배운것

MUI datagrid switch button 추가

marterial-ui datagrid활용시 row와 column을 주입하면 높은 완성도의 테이블이 구축된다.

column객체에 열을 정의하는 요소를 넣어줄수있는데 정의된 property가 생각보다 많아

잘활용하면 내가 원하는대로 쉽게 테이블을 구성할 수 있다.

기본 데이터 외에 열마다 switch버튼을 추가해야 할경우 renderCell이라는 키에 화살표함수에 return값에

만들고자 하는 버튼또는 컴포넌트를 주입하면 원하는 데이터가 완성된다.

const column=[
{
    field: 'status',
    headerName: '상태',
    type: 'boolean',
    width: 210,
    editable: true,
    renderCell: () => <OpenSwitchToggle />,
  },
]

https://mui.com/x/react-data-grid/columns/

Data Grid - Columns - MUI X

 

 

react 라우팅과 path설정

URL에 따라서 특정화면을 보여주는 걸을 Routing이라고 한다.

현재 구현중인 화면은 유저가 공유할수 있는페이지형태에 권한에 따라 수정도 가능한 페이지인데,

라우팅이 설정되지 않은채 페이지나 컴포넌트를 구현하게 되면 유저입장에서 몇가지 불편함이 발생했다

• 수정권한이 있는 유저가 뒤로가기로 누르면 이전작업화면으로 이동되는것이 아니라 다른곳으로 이동되어 굉장히 불편하다
• 주소창의 url이 고정되어 자주 사용될 특정기능에 대한 즐겨찾기 또는 화면공유의 어려움 

<Route path="/homepage/:id/edit" element={<Edit />}>
   <Route path=":editId" element={<Edit />} />
 </Route>

파라미터로  path경로로 지정하면 위의 문제를 쉽게 해결할 수 있다.

input multiple 속성 mui textfield에서 사용방법

input type을 file로 지정해주면 파일업로드가 가능한데

multiple속성을 지정할경우 파일 다중선택이 가능하다.

mui textfield는 기본적으로 input tag기반이라 다양한 prop을 제공하는데

mui에서 textfield로  multiple을 적용하려면

inputProps={{ multiple: true }} 을 넣어주면 다중선택이 가능함

 

https://mui.com/material-ui/api/input/

Input API - Material UI