jjuya

Reactjs code snippets 설치Marketplace - "Reactjs code snippets" 검색 - 설치  Reactjs code snippets 사용법단축기를 통해 템플릿을 생성해 줄 수 있음  자동 사용되는 단축키단축키설명rcc클래스 컴포넌트 생성rrc클래스 컴포넌트와 react-redux를 연결해서 생성rccp클래스 컴포넌트와 propTypes을 생성rcjcimport, export 없는 클래스 컴포넌트 생성rcfc클래스 컴포넌트와 모든 라이프 사이클 메소드 포함해서 생성 rwwd import없는 클래스 컴포넌트 생성 rsc 화상표 함수형 컴포넌트 생성 rsf 함수형 컴포넌트 생성

lazy loading : 지연로딩React.lazy() 동적으로 코드를 로드하고 렌더링 할 수 있게 해 줌실제로 컴포넌트가 사용될 때까지 실제 컴포넌트의 코드를 로드하지 않음 lazy importimport { Suspense, lazy } from "react";React.lazy() 사용할 때, 사용하고자 하는 컴포넌트를 React.Suspense 컴포넌트 안에 렌더링 해야 함Suspense 컴포넌트는 fallback prop으로 컴포넌트가 로드되는 동안 로딩 스피너를 보여줄 수 있음 React.lazy 사용const Main = lazy(()=> import("../pages/MainPage"))Suspense로 컴포넌트 감싸주기 + fallback prop추가! const Loading = Lo..

REACT에서 페이지 이동처리 하는 방법 라우팅이란?사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것 리액트 라우더 (React Rouder)사용자가 입력한 주소를 감지하는 역할, 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트를 제공이중 가장 많이 사용하는 컴포넌트는 BrowserRouter와 HashRouterBrowserRouter : HTML5를 지원하는 브라우저의 주소를 감지HashRouter : 해시 주소를 감지 (ex : http://localhost3000/#home) 설치 방법npm install react-router-dom

TypeScript 설치npm install typescript @type/node @type/react @type/react-router-dom @type/jest @type/react-domjs 파일 →. tsjsx 파일→. tsx javascript vs TypeScriptjavascript(동적언어) : 런타임에 타입 결정 / 오류 발견Java, Typescript(정적언어) : 컴파일 타임에 타입 결정 / 오류 발견function add (num1 : number, num2 : number){ console.log(num1+num2);}add(1,2);function showItems(arr : number[] or : Array){ arr.forEach(item =>{ console.log(..

stateprop : 컨퍼넌트를 사용하는 외부자를 위한 데이터state : 컨퍼넌트를 만드는 내부자를 위한 데이터// 상태 생성시// ** 원시데이터타입Const [value, setValue] = useState(PRIMITIVE);string number boolean// ** 범객체Const [value, setValue] = useState(Object);object, array// 처리방벙이 달라짐 = 데이터 복제newValue = {...vaue}newValue변경 // 복제본 바꿈setValue(newValue) // 컴퍼넌트 다시실행newValue = [...vaue] //복제newValue변경 // 복제본 바꿈setValue(newValue)// setValue시 value값이 변경이..

* 참고 : 공식문서 https://ko.legacy.reactjs.org/docs/components-and-props.html Components와 Props – ReactA JavaScript library for building user interfacesko.legacy.reactjs.org Components사용자 정의 태그 사용(대문자로 사용) → 함수를 정의: 함수의 형태로 사용 (생산성 증가)function Header(){ return header}// Header의 함수를 정의// header는 태그 function App(){ // 사용자 정의 태그 (컴퍼넌트) Header로 사용} props속성function Header(props){ // 파라미터로 props받아줌 retu..

React 설치react 설치 전 폴더 만들어줌( 폴더이름에 대문자가 있으면 설치가 안됨)node.js 설치후, vscode에서 터미널 열어줌터미널에 commond prompt에서 설치 코드 작성npx create-react-app .// powoershell에서 설치가 잘 안될수도 있음// . : 현재폴더에 생성  React 수정index.js 입구 파일 → 제일 먼저 index.js파일을 읽어드림 (App을 불러옴)App.js에서 수정해서 사용하면됨App.css 스타일 지정해 주면 됨public 안에 전체 html구조가 있음 → index.html  React 배포서비스에 최적화되어있는 배포본을 만들 수 있을까?터미널 켜줌 (실행하고 있는 명령들이 있을 경우 : ctrl+c )// 배포판 만들어주기n..

React란?React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서,사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 React 공식문서https://ko.legacy.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리A JavaScript library for building user interfacesko.legacy.reactjs.org Node.jsREACT 사용 시 Node.js 와 함께 사용  JSXJavaScript를 확장한 문법자바스크립트 코드와 html 코드를 함께 사용할 수 있어 편리함UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장React JSX 공식문서 참조 https://ko.leg..