material-ui4 React Material-UI Sort Table Custom Hook 이용하기 Material-UI를 이용해서 오름차순, 내림차순이 가능한 정렬 테이블을 만드는 중에 React의 장점 중 하나가 component를 재사용 할 수 있는 것인데 Sort 기능을 사용하기위해서 똑같은 함수를 재선언 하여 사용하고 있는 제 자신을 발견 했습니다. 두 개의 자바스크립트 함수에서 같은 로직을 공유하고자 할 때는 또 다른 함수로 분리하여 사용하는데 React는 자신만의 Hook을 만들면 컴포넌트 로직을 함수로 뽑아내어 재사용할 수 있습니다. 컴포넌트와 Hook 또한 함수이기 때문에 같은 방법을 사용할 수 있습니다! 1. Material-UI Sort Table Material-UI에서 제공하는 Sort Table코드를 제가 사용하기 위해서 분석한 코드 입니다. SortTableContainer... 2021. 5. 11. Material-UI TextField 속성 error와 JavaScript test()를 이용한 validation (유효성검사) JavaScript가 제공하는 test메서드와 TextField가 제공하는 error와 helperText를 이용하여 간단히 validation 구현 JavaScript 정규식표현을 이용한 test메서드 활용하기 let checkSpc = /[~!@#$%^&*()-=_+{}|,./?;':"]/; let checkKor = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/; let checkEng = /[a-z | A-Z]/; //대문자 소문자 구분 checkSpc.test('a') // false checkSpc.test('ㄱ') // false checkSpc.test('!') // true checkKor.test('a') // false checkKor.test('ㄱ') // true checkKor.test('!') .. 2021. 3. 23. Material-UI Table Header 고정하기 Material-ui Table 속성 StickyHeader 이용하기 태그를 이용하여 header를 고정 시키려면 style의 top의 값을 이용하여 직접 계산해서 만들어줘야하는데 Material-ui의 Table에는 친절하게 StickyHeader가 있다. 아래의 코드는 height의 크기를 지정하고 scroll로 table을 내리면 헤더가 고정되지 않고 전부 내려간다. import React from 'react'; //material import import Paper from '@material-ui/core/Paper' import Table from '@material-ui/core/Table'; import TableBody from '@material-ui/core/TableBody'; i.. 2021. 1. 30. React에서 Material-UI 이용하기 1. Material-UI 소개 Material-UI이는 React UI Framework 종류 중 하나입니다. Material-UI 홈페이지에서도 Material-UI를 React components for faster and easier web development. Build your own design system, or start with Material Design. 라고 소개하고 있네요. 2. Material-UI 설치 1. React 프로젝트 생성 //npm 이용 npm init react-app material-tutorial //yarn 이용 yarn create react-app material-tutorial npm과 yarn 둘 중 편한것을 이용하여 프로젝트를 생성합니다. 2. M.. 2021. 1. 26. 이전 1 다음 728x90 반응형
