뇌 채우기 공간

리덕스에서 타입스크립트를 사용하는 법을 알아보자 출처 : 벨로퍼트 [요약] 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를 지정 안해주면 됨! 다음 게시..