react4 [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] 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] 넥스트 1. 넥스트 (Next.js) - 자바스크립트 생태계의 웹 프레임워크 3대장 : 리액트(React), 앵귤러(Angular), 뷰(Vue) 프레임워크 - 리액트 : 페이스북에서 개발한 오픈소스 라이브러리, 컴포넌트를 사용하여 UI를 효율적으로 만들기 위한 프레임워크 - 넥스트 : 리액트 기반의 프레임워크. 1-1. 리액트의 장점(SPA의 장점) - SPA : 단일 페이지 애플리케이션 - 현재의 페이지를 동적으로 작성함으로써 사용자와 소통하는 웹 애플리케이션. ( 연속되는 페이지 간의 사용자 경험을 향상시키고, 웹 애플리케이션이 데스크톱 애플리케이션처럼 동작하도록 도와줌) - 사이트에 접속할때 하나의 페이지를 불러오며, 필요한 모든 자바스크립트 파일을 한번에 불러옴. - 페이지 이동을 하게되면 받아온 파일.. 2022. 4. 21. [React] React란 공부 시작 전, 책 한번 훑어보며 궁금해서 찾아본 리액트 관련 이모저모 1. React - 사용자 인터페이스 구축을 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리. - 컴포넌트 단위로 UI를 구성하는 JavaScript 라이브러리. - Facebook에서 개발하여, 2013년에 오픈 소스화. 1-1. State & Props - State를 통해 컴포넌트의 상태값을 관리. - Props를 통해 컴포넌트의 속성을 전달. 일반적인 리액트의 데이터 플로우에서 부모컴포넌트가 자식과 상호작용할 수 있는 유일한 수단. 1-2. Virtual DOM (1) 사용자의 뷰에 변화가 생김. (2) Virtual DOM에 변화를 적용시킴. (3) 최종적인 결과물을 실제 DOM에 전달. -> Virtual .. 2022. 2. 15. 이전 1 다음