react12 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. [React] 라이브러리 없이 Div Slideshow 구현하기 메인 화면에 주요 컨텐츠 Image와 약간에 설명이 있는 div를 slideshow로 보여주고 싶어서 찾아보니 custom hook을 사용하거나 다양한 library를 이용하는 코드들이 대부분이었다. 사실 library로 손쉽게 구현하고 싶었으나 library를 더 추가하고 싶은 마음이 없어서 조금더 찾아보니 W3에서 html와 javascript로 작성해준 slideshow 코드를 발견했다. www.w3schools.com/w3css/w3css_slideshow.asp W3.CSS Slideshow Displaying a manual slideshow with W3.CSS is very easy. First, set the slideIndex to 1. (First picture) Then call s.. 2021. 4. 30. React-Quill Image resize React project 중 Text Editor를 추가하는데 한글 지원 되는 Editor가 React-quill 밖에 없어서 React-quill 적용 중 React Quill로 이미지를 리사이징하기 위해 모듈을 추가하는데 이것때문에 딥빡 할 줄이야....ㅠㅠㅠ yarn add quill-image-resize-module 먼저 모듈 설치를 합니다. React-quill image resize를 검색하면 튜토리얼이나 도큐먼트에 나오는 모듈입니다. import ReactQuill from "react-quill"; import "react-quill/dist/quill.snow.css"; import ImageResize from 'quill-image-resize-module' Quill.registe.. 2021. 4. 22. 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 2 다음 728x90 반응형
