React18 [React] React vs Vue React vs Vue React Vue 공통점 Virtual Dom 사용 →Real Dom을 얕은 복사한 Virtual Dom 내의 변경사항을 추적하여 전체 트리의 다른 부분에 영향을 주지 않고, 매핑된 실제 DOM상의 특정요소만 업데이트. Real Dom을 직접 조작하는 것에 비해 성능이 뛰어나다. Component 기반의 개발 → 웹 UI를 작은 Component 단위로 구성 → Component는 다른 프로젝트에서도 재사용할 수 있고, Component *캡슐화와 확장이 가능해 개발이 유연해진다. 차이점 JSX 문법 (Javascript XML) 사용 → XML 포맷의 템플릿을 직접 자바스크립트에 내장시키는 형태 → 다른 프레임워크에 비해 더 JavaScript에 집중된 형태의 Component .. 2020. 7. 2. [React] REAL DOM / VIRTUAL DOM REAL DOM / VIRTUAL DOM Real Dom Virtual Dom - DOM에 변경이 일어남(data의 update) -> DOM Tree가 다시 만들어짐 -> Render Tree도 다시 만들어짐 -> 레이아웃-페인트-합성) - 10개의 list 중 하나의 list만 변경이 있어도 10개 list 전체를 Reload 해야 됨. - 비용이 큰 작업 - Virtual DOM에서 Real DOM의 스냅샷을 찍어 놓음 -> DOM에 변경이 일어남 -> 실제로 브라우저가 관리하는 Real DOM과 리액트가 메모리상에서 관리하는 Virtual DOM을 shallow comparison(얕은 비교)하여 변경된 부분이 있나 관찰 -> 변경된 부분이 있으면 Real DOM에서 바꾸어 줌 - 10개의 lis.. 2020. 7. 1. [React] Nomad Coders - ReactJS로 영화 웹 서비스 만들기 ( 4.0-6.3강 Making App / Deploy / Router ) Nomad Coders - ReactJS로 영화 웹 서비스 만들기 ( 4.0-6.3강 Making App / Deploy / Router ) 공부 내용 정리 movie_app > src > App.js 코드 import React from 'react'; import { HashRouter, Route } from "react-router-dom"; // react router : router는 URL을 가져다가 확인하고, 우리가 router에 무엇을 명령했느냐에 따라 // 불러올 컴포넌트를 결정한다. // /about -> About.js /home -> home.js import Home from "./routes/Home"; import About from "./routes/About"; impor.. 2020. 6. 25. [React] Nomad Coders - ReactJS로 영화 웹 서비스 만들기 (3.2강 Component Life Cycle) Nomad Coders - ReactJS로 영화 웹 서비스 만들기 (3.2강 Component Life Cycle) 공부 내용 정리 movie-app > src > App.js 코드 import React from 'react'; class App extends React.Component { // React class component have Render, Life cycle methode // Life cycle methode : series of events that happen from the birth of a React component to // its death // mounting : birth of component // when the component mount( = When it.. 2020. 6. 24. [React] Nomad Coders - ReactJS로 영화 웹 서비스 만들기 (3.0, 3.1, 3.3강 Class Components & State) Nomad Coders - ReactJS로 영화 웹 서비스 만들기 (2.4강 Pretection with PropTypes) 공부 내용 정리 movie_app> src > App.js 코드 import React from 'react'; class App extends React.Component {\ // class: component를 생성할 때마다 모든 것을 다시 구현하고 싶지 않기 때문에 부모의 속성을 // extends시킨다. state = { // state: object // component의 data를 넣는다. 이 데이터는 변한다(change). count: 0 }; add = () => { // this.state.count = 1; // 위 코드는 작동하지 않는다 : Do not mu.. 2020. 6. 24. 이전 1 2 3 4 다음