뇌 채우기 공간

소개 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..

리덕스에서 타입스크립트를 사용하는 법을 알아보자 출처 : 벨로퍼트 [요약] 1. 모듈에서 액션에 as const붙이기 2. state와 action의 타입 정해주기 3. 리듀서의 반환값과 state의 반환값 일치 시키기 4. Root리듀서에서 RootState export하기 5. index.tsx에 provider에 루트리듀서로 만든 store주입시키기 6. 컴포넌트에서 props 타입 정하기 7. 컴포넌트에서 useSelector로 가져올때 RootState로 지정해서 가져오기 1. modules/counter.ts ★ action에 as const를 붙여준다. 나중에 액션 객체를 만들 때 action.type을 추론하는 과정에서 string으로 추론되지 않고 'counter/INCREASE'와 같이..

[Material Ui Data Grid] https://mui.com/components/data-grid/ React Data Grid component - MUI A fast and extendable react data table and react data grid. It's a feature-rich component available in MIT or Commercial versions. mui.com react에서 테이블을 만드는 라이브러리들은 여러개가 있는데 그 중에서 이번 시간에는 material ui 를 사용해보려고 한다. 사용해본 소감은 정말 세상에나 너무나 쉽다. 내가 구현해보고자 했던 기능은 1. row가 선택될 수 있어야 하지만 일부는 자동으로 선택 불가하도록 2. 일부 colu..

이전 글 보기 1. 함수의 타입 설정하기 함수에는 파라미터와 리턴타입을 지정해주어야한다. 특히나 input, form에서의 타입을 지정해보겠다. import React, { useState } from 'react'; type MyFormProps = { onSubmit : (form : {name : string; description: string}) => void; } function MyForm({onSubmit}: MyFormProps){ const [form , setForm] = useState({ name: '', description : '' }) const {name, description} = form; const onChange = (e:React.ChangeEvent) => { c..

이제는 타입 스크립트가 대세! 타입스크립트를 사용하면 타입 추론을 개발할 때 오류를 줄여주고 코드를 작성하기 쉽게 도와준다. 전에는 리액트를 js로 작성했지만 이제는 타입스크립트로 하는 법을 배워야한다. 회사에서는 다 타입스크립트를 쓰기 때문에! 타입을 지정해주는 것이 자바에서는 당연한 것이었는데 자바스크립트에서는 이렇게 따로 뭔가 해야한다니. 처음에는 자바처럼 타입을 지정해주지 않아도 되는 점이 편리했는데 따로 타입 스크립트를 써야한다면 애초에 자바처럼 타입을 지정해두는게 더욱 편하지 않을까?! 리액트 앱을 시작할 때부터 타입 스크립트로 작성하는 것을 추천한다고 한다. 나는 타입스크립트에 대해서 지식이 거의 없기 때문에 일단 js로 구현하고 converting을 했지만 처음부터 ts로 작성하는 법을 배..

import React, {useCallback, useEffect, Suspense, lazy } from "react"; import { ConnectedRouter } from "connected-react-router"; import { Route, Switch, useLocation } from "react-router-dom"; import { history } from "../redux/configStore"; //... import NotFound from "../pages/NotFound"; function App() { return ( //... ); } export default App; 다른 페이지들은 path를 지정해주는데 Notfound는 path를 지정 안해주면 됨! 다음 게시..