웹 페이지에서 많은 양의 데이터를 일목요연하게 보여주기 위해서 테이블(table) UI가 많이 사용됩니다. React로 완성도 있는 테이블 컴포넌트를 개발하려면 이외로 고려할 부분이 많아서 생각보다 많은 시간과 노력이 들어가게 되는데요. 이번 포스팅에서는 Material UI를 이용하여 좀 더 손쉽게 테이블 UI를 구현해보도록 하겠습니다. Material UI의 기본적인 셋업에 대한 부분은 관련 포스팅를 참고 바랍니다. 필요한 컴포넌트 HTML을 사용해서 테이블의 열과 행의 골격을 만들 때, <table> 엘리먼트 뿐만 아니라, <
Material UI에서 기본적으로 제공하는 컴포넌트를 그대로 사용해도 훌륭하지만 약간씩 스타일을 변경하고 싶을 때가 있습니다. 이번 포스팅에서는 Material UI에 사용자가 정의한 스타일을 적용하는 방법에 대해서 알아보겠습니다. Material UI의 기본적인 셋업에 대한 부분은 관련 포스팅를 참고 바랍니다. CssBaseline 컴포넌트 어떤 브라우저를 돌아가느냐에 상관없이 일괄적인 스타일을 적용되려면, CSS를 전역에서 정규화(normalize)시켜주는 것이 권장됩니다. 이를 위해서 우선 <CssBaseline /> 컴포넌
웹페이지의 레이아웃을 잡을 때 컨텐츠를 화면 중앙에 위치시키기나 격자로 배치해야 할 때가 많이 있습니다. Material UI의 <Container/>와 <Grid/> 컴포넌트를 사용하면 이러한 웹페이지 레이아웃을 매우 쉽고 간단하게 잡을 수 있습니다. Material UI의 기본적인 셋업에 대한 부분은 관련 포스팅를 참고 바랍니다. Container 컴포넌트 <Container/> 컴포넌트는 컨텐츠를 좌우에 적당한 간격을 두고 화면 중앙에 위치시킬 때 사용합니다. 최대 너비만을 제한하는 fluid 모드와 항상 동일한 너비를 강제하
웹페이지의 UI를 구현하다 보면 서로 관련이 있는 여러 개의 컴포넌트를 시각적으로 하나의 그룹처럼 묶어주는 컴포넌트가 필요합니다. 이렇게 관련된 여러 컴포넌트를 보기 쉽게 도와주는 Material UI의 <Paper/>와 <Card/> 컴포넌트에 대해서 알아보겠습니다. Material UI의 기본적인 셋업에 대한 부분은 관련 포스팅를 참고 바랍니다. Paper 컴포넌트 먼저 살펴볼 <Paper/> 컴포넌트는 마치 포스팅잇처럼 화면에서 도드라져 보이는 효과를 제공합니다. elevation, outlined 이렇게 2가지 형태를 사용할
사용자로 부터 정보를 입력 받는 양식(form) UI의 경우 <input/> 또는 <select/>, <textarea/>와 같은 HTML 엘리먼트가 많이 사용됩니다. 이러한 입력 엘리먼트는 브라우저마다 다른 스타일로 표현되고, 기본 스타일은 그대로 사용하기에는 너무 단조롭기 때문에 CSS를 이용해서 커스텀 스타일을 해주는 것이 일반적일 것입니다. Material UI는 이러한 입력 엘리먼트를 이미 예쁘게 디자인된 React 컴포넌트 형태로 제공을 해주기 때문에 우리는 그냥 편리하게 갔다 쓰기만 하면 됩니다. 이번 포스팅에서는 Ma
React 앱을 개발할 때 Material UI와 같은 컴포넌트 라이브러리를 사용하는 이유 중 하나는 버튼과 같이 너무 기본적인 컴포넌트를 직접 구현하는데 들어가는 시간과 노력을 절약하기 위함일 것입니다. 일반적으로 버튼은 UI에서 사용자의 명령을 받아드리는 창구 역할을 하고, 여러 페이지에 거쳐서 다양한 형태로 사용됩니다. 따라서 단순히 사용자 경험 뿐만 아니라 해당 서비스의 전체적인 브랜드 이미지에도 큰 영향을 줄 수 있습니다. 이번 포스팅에서는 이렇게 생각보다 상당히 중요할 수 있는 버튼을 Material UI에서 제공하는 <
지난 포스팅에서는 Material UI의 <Typography/> 컴포넌트를 사용하여 텍스트를 표현하는 방법에 대해서 알아보았습니다. 이번 포스팅에서는 텍스트와 더불어 UI에서 감초같은 역할을 하는 아이콘을 Material UI에서 어떻게 사용할 수 있는지 알아보도록 하겠습니다. Material UI의 기본적인 셋업에 대한 부분은 관련 포스팅를 참고 바랍니다. Material Icons Material UI는 @material-ui/icons 패키지를 통해서 1,000 여종의 SVG 아이콘을 제공하고 있습니다. 그래서 아이콘을 엄청
Material UI는 현재 가장 많이 쓰이고 있는 React UI 컴포넌트 라이브러리 중에 하나입니다. 많은 React UI 컴포넌트 라이브러리는 기존에 있는 CSS 라이브러리를 기반으로 만들어지는 경우가 많습니다. React Bootstrap이 대표적인 예인데요. 이러한 React 라이브러리는 근간이 되는 CSS 라이브러리에 대한 이해나 경험이 없는 경우 여러모로 사용하기 불편한 경우가 많습니다. 하지만 Material UI는 여타 React UI 컴포넌트 라이브러리와 달리 처음부터 React로 만들어졌기 때문에 많은 개발자들에