Nextjs7 [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. [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. [Next.js] /pages - 라우팅 1. 라우팅 - 라우팅 설정 : /pages 폴더에 파일을 만들면 파일의 경로에 따라 경로가 설정됨. 1-1. 정적 페이지 라우팅 - 폴더에 파일을 만드는 것만으로 경로가 자동 설정됨. pages/index.jsx import Link from "next/link"; const App = () => { return( Link to 'sample' Page Move to '/sample' ); } export default App; /pages/sample.jsx import Link from "next/link"; const Sample = () => { return ( Link to 'main' Page Move to '/' ) } export default Sample; 1-2. Link 컴포넌트 -.. 2022. 4. 21. [Next.js] 넥스트 1. 넥스트 (Next.js) - 자바스크립트 생태계의 웹 프레임워크 3대장 : 리액트(React), 앵귤러(Angular), 뷰(Vue) 프레임워크 - 리액트 : 페이스북에서 개발한 오픈소스 라이브러리, 컴포넌트를 사용하여 UI를 효율적으로 만들기 위한 프레임워크 - 넥스트 : 리액트 기반의 프레임워크. 1-1. 리액트의 장점(SPA의 장점) - SPA : 단일 페이지 애플리케이션 - 현재의 페이지를 동적으로 작성함으로써 사용자와 소통하는 웹 애플리케이션. ( 연속되는 페이지 간의 사용자 경험을 향상시키고, 웹 애플리케이션이 데스크톱 애플리케이션처럼 동작하도록 도와줌) - 사이트에 접속할때 하나의 페이지를 불러오며, 필요한 모든 자바스크립트 파일을 한번에 불러옴. - 페이지 이동을 하게되면 받아온 파일.. 2022. 4. 21. 이전 1 2 다음