뇌 채우기 공간

소개 redux는 새로고침 시에 상태들이 모두 날라가는 반면 redux-persist를 이용하면 로컬 스토리지에 저장이 된다. 그래서 원래 리덕스처럼 사용하는데 새로고침 시에 날라가지 않고 개발자도구에서 삭제 할 때 까지 유지된다. 설치 yarn add redux-persist 코드 store/index.js localStorage에 저장하고 싶으면 import storage from 'redux-persist/lib/storage session Storage에 저장하고 싶으면 import storageSession from 'redux-persist/lib/storage/session 이렇게 설정해주고 원래 쓰던대로 쓰면 됨

보호되어 있는 글입니다.

회사에서 어드민 쪽 페이지를 만들게 되어서 여러가지 그리드 라이브러리들을 살펴봤다. 집중적으로 본 것은 mui data grid, react-table, ag grid가 있다. 난이도는 mui data grid { const data = gridApi.getSelectedRows(); if (data.length > 0) { setBtnDisabled(false); } else { setBtnDisabled(true); } setSelectedRows(gridApi.getSelectedRows()); }; const onCellValueChanged = (e) => { console.log("changed", e.data); }; return ( editable table action1 action1 a..

[Recoil이란?] https://recoiljs.org/ko/docs/introduction/motivation 동기 | Recoil 호환성 및 단순함을 이유로 외부의 글로벌 상태관리 라이브러리보다는 React 자체에 내장된 상태 관리 기능을 사용하는 것이 가장 좋다. recoiljs.org 보통 리액트에서는 전역 상태 관리로 리덕스를 많이 사용했다. recoil은 리덕스와 마찬가지로 전역으로 데이터를 구독해서 컴포넌트에서 사용할 수 있는데 훨씬 간단한 라이브러리이다. [사용법] recoil/todo.ts 파일을 만든다. import { atom } from "recoil"; export interface ITodoTypes { id: number; contents: string; isComplete..

저번에는 MUI-DATA GRID를 사용해서 테이블을 만들어보았다. mui에서는 column hide, select , 등등 아주 쉽게 제공해주어서 개발하는데 정말 얼마 걸리지 않는다. 그런데 react-table을 사용하면 이것들을 하나하나 추가해주어야한다. 이번에는 react-table을 사용해보자 (개인적으로 data grid가 코드가 깔끔하고 아주 빠르게 개발할 수 있어서 더 좋다. ) [Row Selection] 참고: column과 rowData는 다른 폴더에 만들었음 export const reactTableColumn = [ { Header: "오더등록일", accessor: "orderDate", }, ... ]; export const rows = [ { id: "1", orderDat..