React ( + Next.js )12 [React/Next.js] MaterialUI - Pagination 적용 - 페이징처리 - MaterialUI의 Pagination 적용 (1) PaginationComponent 만들기 npm install "@mui/lab" import { Pagination } from "@mui/lab"; import React from "react"; interface IProps { total: number; size: number; page: number; setPage: (newPage: number) => void; } export const PaginationComponent = ({ total, size, page, setPage, }: IProps) => { const changePageHandler = (newPage: number) => { setPage(newPage); }; r.. 2022. 7. 20. [React/Next.js] MaterialUI (CssBaseLine , makeStyles) 1. CssBaseline 컴포넌트 - 일괄적인 스타일 적용을 위해 컴포넌트 추가 - next.js //_document.tsx import React from "react"; import Document, {DocumentContext, Head, Html, Main, NextScript} from "next/document"; import {ServerStyleSheets} from "@material-ui/styles"; class AppDocument extends Document { static async getInitialProps(ctx: DocumentContext) { const originalRenderPage = ctx.renderPage; // material-styled const.. 2022. 5. 26. [React] immer 사용하기 1. immer - 불변성 유지를 간단하게 해주는 라이브러리 2. 설치 npm install immer 3. useState와 함께 immer 사용하기 produce(수정하고싶은 상태, 상태업데이트정의함수) import React, { useState } from "react"; import produce from "immer"; export interface ILogin { username: string; password: string; } const [loginForm, setLoginForm] = useState({ username: "", password: "", }); //일반 setLoginForm( produce(loginForm, draft => { draft[key] = e.target... 2022. 5. 26. [Nextjs] Hooks 1. useState - 함수 컴포넌트에서 가변적인 상태를 지닐수 있게 해줌 - 타입스크립트 interface를 정의한 후 사용 가능 const [상태값, 상태변경함수] = useState(기본값); import React, { useEffect, useState } from "react"; import { TableBody, TableRow, TableCell } from "@material-ui/core"; //boolean const [term, setTerm] = useState(false); //Object - typescript export interface IProdInfo { prodId: number; prodName: string; price: number; } const [prodIn.. 2022. 5. 26. [React /Next.js] Redux & Reducer(작성중) 1. 리듀서 (Reducer) - 이전 상태와 동작을 받아서 새 상태를 리턴함. - 항상 현재 상태를 '읽기 전용'으로 다루며, 기존 상태를 변경하지 않고 새상태를 리턴. - 메뉴Toggle , 로딩 On/Off , 테마Change 등. 2. Reducer 선언 //GlobalReducer.tsx //TypeScript&Redux import {ActionType, createAction, createReducer} from 'typesafe-actions' //인터페이스 선언 export interface IGlobalReducer { menuShow: boolean } //초기값 설정 const initialState: IGlobalReducer = { menuShow: false } //액션 생성 .. 2022. 5. 24. [React/Next.js] Recoil 1. Recoil - React를 위한 상태관리 라이브러리 - Atom 상태 단위로 관리하며 컴포넌트는 Atom을 구독하면됨. 2. 설치 npm i recoil 3. RecoilRoot - Recoil 을 사용하는 컴포넌트를 로 감싸준다. - Next.js 예시 (_app.tsx) // _app.tsx import {RecoilRoot} from "recoil"; const App = ({Component, pageProps}: AppProps) => { return ( ) } export default App; 4. Atom 선언 - 컴포넌트에서 write/read 되는 상태값 - 컴포넌트는 Atom을 구독하며, 값 변경 시 컴포넌트를 리렌더링 시킴. //RecoilStatus.ts import {at.. 2022. 5. 24. 이전 1 2 다음