ReactJS(10)
-
[ReactJS] 리액트 컴포넌트, 엘리먼트
React Element : React.createElement()로 정의. 가볍고, stateless 하며 불변하며 DOM Element의 가상 표현식입니다. ReactElement는 가상 DOM 안에 포함되어 있고, 이 개념들이 노드를 생성 - HTML 태그들이 바로 이런 Element (div / table / h1 / Fragment...) var ele = React.createElement('div'); ReactDOM.render( ele, document.getElementById('exam'); ) JSX는 HTML코드를 ReactElements로 컴파일 아래 코드 형식. var ele = this is div ReactDOM.render( ele, document.getElementBy..
2019.05.19 -
[ReactJS] JSX
JSX는 HTML 코드와 비슷하지만 자바스크립트로 변환됩니다. 리액트 컴포넌트를 사용할 때 쓰는 문법입니다. 꼭 닫혀야 하는 태그 (x) (o) - self closing tag 두개 이상의 Element는 무조건 하나의 Element로 감싸져 있어야 한다 // 따로 따로 Element가 있으면 error! class ReactApp extents Component { render(){ return ( hello!!! world!! ) } } // 이렇게 두 개의 div Element는 Element로 감싸져야 한다 class ReactApp extents Component { render(){ return ( hello!!! world!! ) } } // React 16.2부터 도입된 Fragment를..
2019.05.19 -
[React] Webpack과 Babel
Webpack(웹팩) 개발 단계 중 빌드(번들링)라 부르는 단계가 있습니다. 이 단계에서 가장 중요한 부분은 packaging(패키징) 잘 감싸 포장하는 것입니다. 즉, 빌드 단계에서 빌드 스크립트가 소스 파일과 node.js의 의존 패키지들을 가지고 브라우저가 성공적으로 실행하게 하는 하나의 file로 변환합니다. (node.js로 개발을 하면 의존하는 모듈이 엄청나게 많아집니다. -- 하나의 js로 패키징) 물론, 라이브러리만 모아둔 JS / 핵심 로직이 들어간 JS처럼 나눠서 생성할 수도 있습니다. Webpack은 이런 build tool 중 하나로 아래의 그림처럼 서로 의존적인 파일들(import/ require)을 축소하고 unit test도 수행하며 애플리케이션에 필요한 resource들(im..
2019.05.18 -
[React] React Virtual DOM
자바스크립트 라이브러리,프레임워크 3대장 (Vue.js / Angular.js / React)중 React를 공부하며 정리하겠습니다. React 리액트는 facebook에서 제공하는 라이브러리로 "지속적으로 데이터가 변하는 대규모 애플리케이션을 구축하기 위해서 리액트를 만듦!" 이라고 제시하네요 :> 이 리액트는 Component라는 개념에 집중된 라이브러리입니다. 웹에서는 MVC/MVVM/MVW 등의 패턴을 사용했습니다. 공통점은 Model View 사이에 어떤 변화가 있으면 다른 쪽에서도 변화를 시켜주는 양방향 바인딩이었습니다. (Component : 데이터를 넣으면 우리가 지정한 인터페이스를 조립해서 보여줍니다.) 변화! facebook에서는 변화가 일어날 필요가 있다면 변화를 하지말고 View를 ..
2019.05.18