🖼Front/React

브라우저의 Workflow 1. DOM Tree 생성 브라우저가 HTML을 받으면 해당 코드를 파싱하여 문서객체트리(DOM Tree)를 만듭니다. 2. Render Tree 생성 만들어진 DOM Tree 와 CSS의 스타일 정보를 이용해 렌더 트리를 생성합니다. 3. Layout (=Reflow) 만들어진 렌더트리를 이용하여 각 노드들의 절대 값 좌표가 주어지고, 정확하게 어디에 나타나야 할 지 정합니다. 4. Painting (=Repainting) Layout 과정까지 마쳤다면 트리의 각 노드들을 필요할 때 화면에 그립니다. React의 Virtual DOM 기존의 웹 브라우저에서는 DOM을 조작하면 렌더 트리를 다시 만들고, Layout 과정을 거쳐 페인팅을 하게됩니다. 옛날의 웹페이지는 단순히 H..

react 프로젝트를 생성해봅시다. 콘솔창에 npx create-react-app 을 입력하거나 편집기의 기능을 사용하면 됩니다. create-react-app.dev/docs/getting-started Getting Started | Create React App Create React App is an officially supported way to create single-page React create-react-app.dev 참고로 이 방식으로 설치하게 되면 yarn 프로젝트 매니저가 함께 설치됩니다. yarn은 페이스북에서 npm처럼 사용할려고 만든 의존성 관리 프로젝트 매니저인데 npm의 단점인 패키지 설치 속도와 보안성을 개선할려고 만든 도구입니다. 둘 중 뭐가 더 좋다기보다는 둘 다 ..

리액트는 컴포넌트 기반 View 라이브러리로 특별한 문법 공부 없이 자바스크립트를 안다면 유사하게 사용 가능합니다. 주로 함수형 프로그래밍 방식으로 많이 작성하게 됩니다. 이 글에서는 자바스크립트의 *더보기 arr.map(callback, [thisArg]) 를 사용합니다. 더보기 arr.map(callback, [thisArg]) Array.prototype.map( ) callback 함수를 주면, 배열의 요소를 순회하며 해당 함수 적용 시킨 배열을 반환합니다. 단, 원본 배열은 수정하지 않습니다. [thisArg]를 입력한다면 콜백함수 내부에서 사용할 this 값을 설정 해 줄수 있습니다. 콜백 함수 callback ( currentValue, [index ,[array]] ) currentValu..

#1 props (Property) 상위 컴포넌트의 속성을 변수처럼 가져와서 사용할 수 있습니다. 컴포넌트 내부의 불변한 데이터 (Immutable Data)를 사용할 때 이용합니다. this.props.속성이름 으로 접근 할 수 있으며 속성 말고 태그 사이에 데이터를 가져오고 싶다면 this.props.children 을 통해 가져올 수 있습니다. this.props.children에는 여기에 있는 값 이 들어가게 됩니다. 안녕하세요 name prop에요 여기가 children 값입니다 class Hello extends React.Component{ render() { return( 안녕하세요 {this.props.name} {this.props.children} ) } } class App exte..

React.js 는 페이스북에서 만든 자바스크립트 라이브러리입니다. 가장 큰 특징으로 JSX (자바스크립트 코드에 HTML을 바로 쓰는 확장문법)과 가상 DOM의 사용입니다. 가상 DOM이란? #1. React는 컴포넌트 기반이다. 보통 클라이언트 도구의 경우 Controller, Model, View model, Template...등으로 나누어져 있는 경우가 많습니다. 하지만 리액트의 모든 것은 Component 기반으로 동작합니다. 참고로 리액트는 View만 담당하는 라이브러리이며, 서버 사이드 / 클라이언트 사이드 렌더링을 둘 다 지원합니다. #2 import react , reactDOM 기존에는 라이브러리 한 개만 불러오면 되었으나 최신버전의 리액트는 라이브러리(react) 와 렌더링(reac..

HTML, CSS, JS 2021.03.22 - [Web/HTML&CSS] - HTML, CSS 기초 ECMA Script 자바스크립트의 표준. Java 이름의 저작권 문제 + 문법 표준이라는 의미로 ECMA(European Computer Manafactures Assocation)라고 부릅니다. 2015년 ES6 이전의 자바스크립트는 언어라고 부르기엔 민망할정도로 개판이었고 ES6 (ES2015) 이후 자바스크립트 표준이 확립되며 여러 편리한 기능이 추가되기 시작했습니다. Node.js 웹 브라우저가 아닌 곳에도 자바스크립트가 작동하도록 해주는 런타임 환경. 유명한 패키지 다운로드 매니저(npm)을 기본 제공해주며 크롬의 V8 웹 브라우저 엔진을 사용합니다. Npm, Yarn 자바스크립트 패키지 매니..