* 블로그 강의 : https://velopert.com/category/dev-log/tech-log/react-js
* 동영상 강의 : https://www.inflearn.com/course/react-%EA%B0%95%EC%A2%8C-velopert/
* 외부링크 관련 강의 : http://webframeworks.kr/getstarted/reactjs/
*14.8 download : https://facebook.github.io/react/blog/2016/03/29/react-v0.14.8.html
1.1 강의노트
|
React 개념? |
- React는 페이스북에서 개발한 유저인터페이스 라이브러리 - Virtual DOM 이라는 개념을 사용하여 상태의 변함에 따라 선택적으로 유저인터페이스를 렌더링 - 따라서, 최소한의 DOM 처리로 컴포넌트들을 업데이트 할 수 있게 함. ( 일반적인 DOM및 렌더 트리 구성은 아래와 같음, 매우 순차적. ) |
|
Dom? |
DOM(Document Object Model)? - 객체를 통하여 구조화된 문서를 표현하는 방법. 주로 XML혹은 HTML로 작성됨. - 정적이고, 트리형태로 구성되어있으며, JavaScript와 CSS를 적용시켜 화려한 front를 창조하기도함. - DOM 자체의 처리속도는 빠른편이나, 브라우저 단에서 DOM의 변화가 일어나면, 브라우저가 CSS를 다시 연산하고 > 레이아웃을 구성하고 > 웹페이지를 리페인트 하는데 이 과정에서 시간이 허비된다. - 여기서 레이아웃을 새로 구성하면서 계산하는 것을 reflow라고 하고, 색상 변경과 같은 레이아웃에 관계없는 것들을 거리하 는건 repaint 라고 함. |
|
DOM의 문제점? |
- 브라우저는 미뤄두고 하는 기능도 가지고있다 : 코드가 실행될 때마다 reflow를 진행한다 판단하면 (성능이 저하된다 판단하면) 브라우저는 미뤄두고 한꺼번에 일을 처리하도록 유도한다. - 하지만 제때제때 가져와야하는 값들 혹은 이벤트들도 있다. (offsetTop, scrollTop, getComputedStyle)등의 코드가 실행 될 때는 현재의 값을 가저오는 것들이 중요하기 때문에 reflow가 여러번 발생 할 수 밖에 없다. - 그렇기 때문에, 성능 개선을 위해서는 reflow 횟수를 줄이기 위해 코드를 최적화 해야함. |
|
DOM의 문제점 해결법? - Virtual DOM (?) |
- html -> 시각화 : 어쩔 수 없음 ( 주역할이기 때문에 ) - 적어도 최소한의 DOM조작을 통해 우리의 작업을 처리하는 방식으로 이를 개선해야 함. - 만약, DOM 작업을 가상화 하여 미리 처리한 다음에 한꺼번에 적용할 수 있는 방법이 있다면? ( 출처 : https://www.slideshare.net/taggon/react-js-46357445 ) Virtual DOM 을 사용하면, 실제 DOM 에 접근하여 조작하는 대신에, 이를 추상화 시킨 자바스크립트 객체를 구성하여 사용합니다. 이는 마치 실제 DOM 의 가벼운 사본과도 비슷하죠.(?) React 에서 데이터가 변하여 브라우저상의 실제 DOM 을 업데이트 할 때에는 다음과 같이 3가지 절차를 밟습니다: 1. 데이터가 업데이트되면, 전체 UI 를 Virtual DOM 에 리렌더링 합니다. 2. 이전 Virtual DOM 에 있던 내용과 현재의 내용을 비교합니다. 3. 바뀐 부분만 실제 DOM 에 적용이 됩니다. 결국에는 컴포넌트가 업데이트 될 때, 레이아웃 계산이 한번만 이뤄집니다. |
|
Node.js? NPM? |
NPM? - node.js 기본 모듈 이외에 수많은 개발자들이 만들어 배포한 외부 모듈을 쉽게 관리하기 위해 만들어진 소프트웨어의 일종. - 확장모듈의 일종이라고도 함. |
< 중간 점검 - 느낀 점 및 목차 따라가는 것에 대한 >
* 궁극적인 고민 : WP에 어떻게 접목 시킬 것인가?
- 작업환경 구축하는 강의를 보면 거의 node.js를 기반으로 설명을 해줌.
- node.js없이 react.js를 사용할 수 있는 방법은 없을까?
- 고민하는 이유? 개발환경 구축 때문에, node.js를 서버때문에 사용하는것 같은데 wp위에서 사용하는 우리가 굳이 필요가 있을까?
- 공부만 할 때 사용하는 툴
|
접속 : NPM없이 브라우저에서 webpack을 사용해서 프로젝트 생성할 수 있게 도와주는 tool. - 상단의 [Boilerplates] > [React] 클릭 : [React]프로젝트 바로 클론해서 바로 시작하기. |
|
|
접속 : NPM없이 브라우저에서 webpack을 사용해서 프로젝트 생성할 수 있게 도와주는 tool의 일종. - 브라우저에서 React.js프로젝트를 작성 할 수 있는 것이 장점이나, JavaScript를 한 파일에서 작성해야하고 ES6의 문법 모두를 제대로 지원하지 않는다는 점이 아쉬움. - 공부할때는 문제가 없다고 함. |
- jquery 외부 링크 불러오는 방법처럼 설치하는 방법
|
(출처 - http://webframeworks.kr/getstarted/reactjs/ ) React를 시작하기 가장 빠른 방법은 CDN(Contents Delivery Network)을 통해서 Javascript를 제공받는 것 // React Library <script src="https://fb.me/react-0.13.3.js"> </script> // In-browser JSX transformer <script src="https://fb.me/JSXTransformer-0.13.3.js"> </script> 만약 Bower를 선호한다면, 아래와 같은 방법으로 쉽게 React를 이용 가능합니다. $ bower install --save react |
<예제>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React</title> <script src="https://fb.me/react-0.13.3.js"></script> <script src="https://fb.me/JSXTransformer-0.13.3.js"></script> </head> <body> <div id="example"></div> <script type="text/jsx"> // ** Example Template ** </script> </body> </html>// sample01.js var HelloWorld = React.createClass({ render: function() { return ( <p> 안녕, <input type="text" placeholder="이름을 여기에 작성하세요" />! 지금 시간은 {this.props.date.toTimeString()} 입니다. </p> ); } }); setInterval(function() { React.render( <HelloWorld date={new Date()} />, document.getElementById('example') ); }, 500);< 테스트 결과 > - 잘됨
* 염려되는점 :
- 외부 스크립트를 import하는거라… 속도
- 다운로드 받아서 import하는건?
- 14로 업그레이드 됐다고했는데 지금 import하는건 13v이라 지원안되는 컴포넌트 혹은 구문이 있을까봐 염려됨 (지속적으로 강의를 보면서 해결해 나가야 할 문제 = 알아야 지원되는게 있는지 없는지 알수 있을 듯 함 )
|
<컴포넌트 구성> // tutorial1.js var CommentBox = React.createClass({ render: function() { return ( <div className="commentBox"> Hello, world! I am a CommentBox. </div> ); } }); React.render( <CommentBox />, document.getElementById('content') ); * 주의할 점 : React 컴포넌트들은 단 하나의 루트노드만을 렌더할 수 있으므로, 여러개의 노드를 리턴하고싶다면, 여러개의 노드를 단 하나의 루트 노드로 조합해야 한다.(객체개념) * 설명 : - Ract컴포넌트를 만들기 위해 Ract.createClass()로 javascript객체를 만들어 render메소드를 담아 넘김. - render 메소드는 React컴포넌트 트리를 리턴 - 최종적으로 실제 HTML그리는 역할을 하는데, - 개발된 컴포넌트들의 트리를 리턴할 수도 있기 때문에 React가 컴포넌트는 보다 조합(composable)하게 됨. —> 이를 통해 최상위 컴포넌트의 인스턴스를 만들고, 두번째 인수로 전달받은 DOM 엘리먼트에 마크업을 삽입. —> ‘<div>’태그는 실제 DOM노드는 아니고, React div 컴포넌트의 인스턴스로서, React가 다룰 수 있는 데이터의 표시자나 조각이라고 생각하면 된다. —> 또, HTML엘리먼트의 이름은 소문자로 시작하고, 커스텀 React클래스 이름은 대문자로 시작하고 있다. => https://velopert.com/900 여기 예제를 => 아래와 같은 코드로 바꿔 표현할 수 있다( 완전한 컴포넌트구성은 아님 ) => 결과는 아래와 같음 => 위 강좌에서는 ‘import’ 방식을 이용해서 ‘컴포넌트’를 묶는 방식을 이용하고 있으나, 작은 단위(모듈) 들을 아래와 같이 묶는게 과연 효율적일까? => 데이터 모델 연결 방식이 훨씬 나을 것 같다는 생각( http://webframeworks.kr/getstarted/reactjs/) (인데.. 왜 이쪽 예제가 안되는지를 아직 해결 못했습니다 ㅠㅠㅠ) |
( + 지금 내가 쓰고 있는 툴은 유료지만 공부할 때 부터 개발툴 까지 쭈욱 잘 쓰고있는 'webstorm'! )
