User Tools

Site Tools


lecture:om:react

React


React의 특장점?

React는 컴포넌트의 개념으로 만들어졌다. Angular 와 Ember 와 대조되는 프레임워크로 페이지의 HTML을 업데이트 하는 양방향 데이터 바인등을 사용한다. 내 생각으로 React는 Angular 와 Ember 보다 배우기 쉽다. - 더 작고 jQuery와 다른 프레임웍보다 사용하기 좋다. 가상 DOM을 사용하므로 매우 빠르다. 밑줄친 페이지의 변경된 부분만 동기화 시킨다.(DOM을 접근하는 것은 최근 웹 애플리케이션에서 가장 느린 부분이다. 최적화 함으로써 향상시킬 수 있다.) 그러나, 반면에 데이터 바인딩으로 쉽게 할 수 있는 같은 것을 얻는 것에서 더 많은 코드를 사용하지만, 아래 예제를 통해 확인 할 수 있다. 비교를 통해 Anglar 를 볼 수 있다.

사용법? 전역 React 객체에 접근하도록 한다. 유용한 메소드를 제어하고, 여기서 확인할 수 있다. JSX라고 불리는 언어를 사용함으로써 React 웹 앱을 작성하는 방법을 추천한다. 작성하는 코드에서 HTML과 유사한 문법을 사용하여 React 콤포넌트를 초기화하는 것을 허용하는 자바스크립트의 약간 향상된 버전이다. 브라우저에 의해 해성되기 전에 자바스크립트에 컴파일 된다. JSX는 선택이다 - 원한다면 일반적인 자바스크립트를 사용할 수 있다.

그만 하고, 몇 가지 코드를 보자.

1. 타이머

말했듯이, React 앱으로 만든 아래 상자는 콤포넌트이다. 아래는 React.createClass() 호출에 의해 만들어졌다. 각 콤포넌트는 상태(데이터를 갖는 객체로)와 각기 자신의 렌더링을 담당한다. - render() 메소드는 상태가 변할 때 호출된다. 아래는 간단한 타이머를 만든 예이다.

콤포넌트를 만들 때, 중괄호{} 는 어떠한 자바스크립트 표현도 포함할 수 있다. 이 예에서 tick() 함수를 호출해 경과한 시작 날짜부터 경과한 초를 계산하는데 사용할 것이다.

2. 탐색 메뉴

탐색 메뉴를 만드는 것으로 React에서 클릭 이벤트를 처리하는 것을 제어해 보자.

HTML에서 실제 존재하지 않는 className같은 속성을 사용한 예제들의 코드로부터 보여진다. 이것은 새로운 <p> 요소를 리턴할 때 HTML을 리턴하지 않지만, React.DOM.p 콤포넌트의 인자로 리턴하기 때문이다.

3. 실시간 검색(자동완성)

시간과 사람들이 기다리기 싫어하는 시간도 알고 있다. 아래는 자동완성 UX를 구현한 React 를 만드는 방법이다. (AngluarJS의 다른 버전 확인 가능)

이 예제는 React의 또다른 중요한 개념을 보여준다. - 컨트롤러의 상태의 업데이트는 HTML에 영향을 주지만 다른 것에는 그렇지 않다. 이 인자에서, 한번 텍스트 박스의 입력한 문자는 유지되고, onchane 함수에서 업데이트 되기 전까지 사용자 입력은 무시된다.(이 동작을 바꿀 수 있지만, 작동하는 추천된 방법이다.)

4. 주문 양식

React의 진정한 장점은 다중 콤포넌트를 결합할 때 이다. 이것은 코드를 더 잘 구성시키고 우려의 분산을 설명한다. 또 웹 어플리케이션의 다른 영역에서 코드를 재사용할 수 있게 한다. 예산을 계획하는 고객들을 돕는 주문 양식의 예이다.(Angular 버전 참고)

다중 컴포넌트 결합시 발생하는 첫번째 이슈는 어떻게 통신할까이다. 한 가지는 초기화시 속성에 원하는 데이터를 넘기는 방법이다. 이것은 상위에서 하위 콤포넌트로만 동작한다. 다른 방향에서의 통신을 위해서는 하위의 속성으로 부터 상위 콤포넌트의 메소드의 하나를 전달할 수 있다. 하위 객체는 이 메소드를 호출할 수 있고 이벤트의 상위에 보낸다. 자세한 사항은 다음을 보자.

5. AJAX를 이용한 이미지 앱

이 예제는 jQuery와 react를 어떻게 결합하는지와 AJAX를 통해 결과를 로딩하는지 보여준다. Angluar와 같은 프레임워크는 AJAX를 동작할 때 각기 방식으로 접근한다. React는 어떤 다른 라이브러리를 사용하던 (Angluar 버전 참고) 편리하다. 사진 목록과 선택한 목록을 렌더링할 때 같은 Picture 콤포넌트를 사용하는 예제를 참고하라. 이 재사용은 콤포넌트에 코드를 구성할 때 좋다.

다음 학습

React는 작성하는 애플리케이션과 코드 재사용을 촉진하는 명백한 구조를 허용한다. 그리고 강력한 가상 DOM 덕분에, 프레임워크는 복잡한 인터페이스를 가속화한다. React는 클라이언트 만큼 서버에서도 렌더링을 위해 적합하고, 클라이언트와 서버간의 트랜젝션하는 동형 앱을 만들 수 있게 한다.

하지만 react에 대해 배울 것이 더 많다. 아래를 참고하라.



React 프레임워크 소개

자바스크립트 애플리케이션 프레임워크 진영의 오늘날, 디자인 철학의 핵심은 차별화 요소이다. 인기있는 JS 프레임워크와 비교한다면(EmberJS, AngularJS, Backbone, Knokout 등) 추상화, 생각하는 모델, 용어에서까지도 차이점을 찾을 수 있다. 이것은 기본 디자인 철학의 직접적인 결과이다. 하지만, 원칙적으로, HTML 요소들을 직접 다루지 않는 방법에서 DOM을 추상화하는 한가지만 한다.

나는 개인적으로 프레임워크는 생각의 다른 모드를 가능하게하는 추상의 세트를 제공할 때 흥미로워진다고 생각한다. 이러한 면에서, REACT(Facebook에서 채택한 새 JS 프레임워크)는 어떻게 UI와 제작한 애플리케이션의 상호작용을 분리할 것인지 어느 정도 다시 생각하도록 강요한다. 0.4.1(지금 시점의)에 도달한 React는 놀라울정도로 간단하다. 다른 종류의 재미있는 칵테일을 섞는듯한 JS 앱들을 만드는 것을 위한 효과적인 모델을 제공한다.

이 문서에서는, React의 블록을 살펴보고, 첫번째로 직관적으로 보이는 생각을 받아들일 것이다. 그러나 React 문서는 말한다 : “ 5분만 더” 그리고 이 방법이 더 자연스럽게되는 접근방법을 확인하게 될 것이다.

동기부여

React의 이야기는 잠시동안 Facebook의 범위 내에서 시작되었다. 충분히 안정해지기까지 개발자들은 몇 개월 더 소스를 오픈하기로 결정했다. 흥미롭게도 인스타그램 웹사이트도 React 프레임워크로 구동된다. React는 DOM 추상화 문제를 약간 다르게 접근한다. 어떻게 다른지 이해하기 위해 앞서 언급한 프레임워크에 의해 채택된 기술을 통해 장점을 알 수 있다.

JS 애플리케이션 프레임워크의 상위 레벨 개요

MVC(Model-View-Controller) 디자인 패턴은 웹 애플리케이션에 있지만, 모든 플랫폼에서 프론트 엔드 애플리케이션 뿐만 아니라 UI 개발에 필수적이다. 웹 앱의 경우 DOM은 뷰의 물리적 표현이다. DOM 자체가 다른 파일, 스크립트 블록 또는 미리 컴파일 된 템플릿 함수에서 가져온 텍스튼 HTML 템플릿에서 생성된다. 뷰는 DOM 조각으로서 라이프 사이클로의 텍스트 템플릿을 제공하는 요소이다. 또한 이벤트 핸들러를 설정하고 그 라이프 사이클의 부분으로 DOM 트리를 조작 처리 한다.

유용한 뷰에서, 어떤 데이터를 보여줄 필요가 있으며, 사용자 상호작용을 허용할 수 있다. 데이터는 데이터 소스로 부터 오는 모델이다.(데이터베이스, 웹 서비스, 내부 저장소 등) 프레임워크는 뷰에서 변화를 자동적으로 반영한 데이터의 변화들로 뷰로 “바인딩” 데이터의 방법을 제공한다. 이 자동 프로세스는 호출된 데이터 바인딩이고 가능하도록 원할하게 하는 API/기술이 있다. [그림] 자동으로 앞 뒤로 뷰와 모델 사이의 데이터 흐름을 처리하는 프레임워크는 내부 이벤트 루프를 유지한다. 이 이벤트 루프는 특정 사용자 이벤트, 데이터 변화 이벤트, 외부 트리거 등을 주시할 필요가 있고, 루프의 이전 실행 전에 어떤 변화가 있을 때 결정된다. 양쪽 끝(뷰와 모델)에서 변화가 있으면 프레임워크는 양쪽에 동기화되어 전달된다.

무엇이 React의 차이를 만드는가?

React로 MVC 트라이어드에서 뷰 부분은 부각을 취하고 콤포넌트를 호출한 요소로 들어간다. 콤포넌트는 속성들을 호출한 불변 속성과 UI의 사용자 주도 상태를 표현하는 상태 유지한다. 콤포넌트의 뷰가 만든 부분은 흥미롭고 다른 프레임워크와 비교되게 눈에 띄는 React를 만드는 이유이다. 파일/스크립트/함수 템플릿에 직접 물리적 DOM을 구성하는 대신, 콤포넌트가 실제 HTML DOM을 위한 중간 DOM을 만든다. 추가되는 단계는 실제 HTML DOM으로 중간 DOM이 번역되어 취해진다.

중간 DOM 생성의 부분에서 콤포넌트는 이벤트 핸들러를 연결하고 속성과 상태를 포함한 데이터를 바인딩한다. [중간 DOM의 아이디어가 작인 외계인 소리를 낸다고 너무 놀라지 말라. 이미 인터프리팅 언어를 위한 언어 런타임(가상 머신)에 의해 이 방법이 채택된 것을 알 것이다. 우리 자신의 자바스크립트 런타임은 먼저 네이티브 코드를 스피팅하기 전에 중간 표현을 생성한다. 자바, C#, 루비, 파이선 등의 VM기반 언어들에서도 마찬가지이다. React는 똑똑하게 최종 HTML DOM을 생성하기 전에 중간 DOM을 만드는 전략을 채택한다. 중간 DOM은 단지 자바스크립트 객체 그래프이고 직접 렌더링되지 않는다. 실제 DOM을 만드는 변환 단계가 있다. 이것은 DOM 조작을 빠르게 하는 React를 만드는 기반 기술이다.]

React 심화

React가 동작하는 방법을 더 잘 그리기 위해 콤포넌트로 시작해 더 깊이 알아보자. 콤포넌트는 React에서 기본 생성 블록이다. 당신은 콤포넌트들의 트리를 구성하는 것으로 애플리케이션의 UI를 구성할 수 있다. 각 구성요소는 render() 메소드를 위한 구현을 제공하는데 중간 DOM을 생성한다. 콤포넌트 트리로 재귀적으로 내려가는 루트 콤포넌트 결과에서 React.renderComponent()를 호출하고 중간 DOM을 생성한다. 중간 DOM은 실제 HTML DOM으로 변환된다. [그림] 중간 DOM 작성이 콤포넌트의 중요한 부분이기 때문에, React는 XML 노드의 셋으로서 콤포넌트 트리를 만드는 자바스크립트로 편리한 XML 기반 확장을 제공하는 JSX라는 것을 제공한다. 이것은 DOM을 쉽게 시각화하고 추록하게 한다. JSX는 또한 이벤트 핸들러와 xml 속성으로서의 속성의 결합을 단순화 한다. JSX가 확장언어 이므로, 최종적인 자바스크립트를 생성하는 도구(명렁어 라인과 브라우저)가 있다. JSX XML 노드는 콤포넌트에 직접 매핑한다. 그것은 단지 쉽게 중간 DOM을 생성하는 JSX 및 JSX 언어의 독립적인 React의 동작을 지시하는 가치가 있다.

툴링 코어 React 프레임워크는 웹사이트에서 다운로드 가능하다. 또한, JSX → JS 변환기로 브라우저 내장 JSX변환기나 react-tool(NPM을 통해 설치된)이라 불리는 명령어 라인 툴을 사용할 수 있다. Node.js를 다운로드하여 설치할 필요가 있다. 명령줄 도구는 JSX 파일들을 미리 컴파일하여 브라우저에서 해석되는 것을 피할 수 있다. JSX 파일들이 크거나 수가 많다면 확실해 추천된다.

간단한 구성요소 그럼, 많은 이론을 학습했으므로, 실제 코드를 보길 원한다고 생각한다. 첫번째 예제를 보자. [코드]

간단하지만, 이 코드는 React 의 적당한 양을 보여준다. - React.creatClass 를 이용해 간단한 콤포넌트를 만들고 코어 함수들을 구현하는 객체로 전달한다. render() 는 가장 중요한 것으로 중간 DOM을 만든다. - JSX를 사용해 DOM을 정의하고 MouseDown 이벤트 핸들러에 연결한다. {} 구문은 ( onMouseDown={this.handleClick} )과 하위 노드 ( <span class=“count”>{this.state.count}</span> ) 속성을 표현하는 자바스크립트를 통합하는데 유용하다. {} 구분을 사용하여 결합된 이벤트 핸들러들은 자동적으로 콤포넌트의 인스턴스에 바인딩된다. 따라서 이것은 콤포넌트 인스턴스를 참조하는 이벤트 핸들러 함수로 들어간다. 첫번째 줄의 /** @jsx React.DOM */ 주석은 JS로 변환되는 JSX 변환기를 위한 큐이다. 이 주석 없이는 변환이 일어나지 않는다.

우리는 시계 모드와 JSX → JS 자동 컴파일 변화들에서 명령줄 도구(jsx)를 실행할 수 있다. 소스 파일들은 /src 폴더에 있고, 출력은 /build 폴더에 생성된다.

1

이것은 생성된 JS 파일이다.

[코드]

<div/> 와 <span/> 태그가 어떻게 React.DOM.div 와 React.DOM.span의 인스턴스로 매핑되는지 주목하라.

- 이제 다시 코드 예제로 돌아가보자. handleMouseDown에서 우리는 안으로ㅗ 전달된 메시지 속성을 읽는 this.props의 사용을 만든다. <Simple/> 콤포넌트를 만드는 React.renderComponent()를 호출하는 작은 코드의 마지막 라인에서 메시지를 설정한다. this.props의 목적은 콤포넌트에 전달되는 데이터를 저장하는 것이다. 그것은 불변이라 여겨지고 콤포넌트 트리 밑으로 전달되고 변화를 만들도록 허용하는 상위 레벨 콤포넌트이다. - handleMouseDown 내에서 우리는 보여지는 메시지의 횟수를 추적한는 this.setState()의 사용자 상태를 설정한다. 당신은 render() 메소드에서 this.state를 사용하는 것을 주목할 것이다. setState() 를 호출할 때마다, React는 동기화되는 DOM을 유지하는 render() 메소드를 트리거한다. 게다가 React.renderComponent(), setState() 는 시각적 새로고침을 유도하는 또다른 방법이다.

합성 이벤트 OnMouseDown 같은 이벤트는 중간 DOM에서 노출된다. 또한 실제 DOM에서 그들이 설정을 얻기 전에 간접 계층 역할을 한다. 이 이벤트들은 합성 이벤트라 불린다. React는 잘 알려진 기술인 이벤트 위임을 채택하고 실제 DOM의 루트 레벨에서만 이벤트를 연결한다. 따라서 실제 DOM에서 실제 이벤트 핸들러는 오직 하나이다. 또한 이 합성 이벤트들은 브라우저와 요소 차이를 숨김으로서 일관성의 수준을제공한다.

중간 DOM의 조합과 합성 이벤트들은 당신에게 다른 브라우저에도 디바이스에서 UI를 정의하는 표준 및 일관된 방법을 제공한다.

콤포넌트 라이프사이클

React 프레임워크에서 콤포넌트들은 특정 라이프사이클과 구별되는 세가지 상태를 가진 상태 버신을 구현한다. [그림] 콤포넌트는 마운트된 후 라이프사이클로 온다. 마운팅은 콤포넌트 트리를 만드는 렌더링 패스를 통해서 결과를 보여준다.(중간 DOM) 이 트리는 실제 DOM의 포함된 노드로 변환되고 배치된다. 이것은 React.renderComponent()를 호출한 결과이다.

한번 마운트되면, 콤포넌트는 업데이트 상태에 머문다. 콤포넌트는 사용자가 setState()나 setProps()를 이용해 속성을 변경할 때 업데이트 된다. 턴에서 이것은 render()를 호출하면 결과를 주는데, 데이터와 동기화된 DOM을 제공한다.(속성 + 상태). 이후 업데이트 사이에, React는 이전 콤포넌트 트리와 새롭게 생성된 트리의 차이를(delta) 계산한다. 이것은 실제 DOM 조작을 최소화 하는 최적화된 단계(그리고 주력 기능)이다.

최종상태는 언마운트된다. 이것은 콤포넌트가 render() 호출에서 더 이상 생성되지 않는 하위 요소일 경우 당신이 React.unmount 와 ReleaseReactRootNode() 또는 자동으로 명시적 호출을 할 때 발생한다. 대부분 이것을 처리할 필요가 없고 React가 처리한다.

React가 마운트-업데이트-언마운트 상태사이에서 움직일 때 별 지시가 없다면 이제 큰 문제가 없다. 다행히 그 경우가 아니라 라이프사이클 변화의 알림을 대체한다면 후크를 사용할 수 있다. 이름은 그들 스스로 말한다 :

- getInitialState() : 콤포넌트의 상태 초기화 준비 - componentWillMount() - componentDidMount() - componentWillReceiveProps() - shouldComponentUpdate() : 렌더링이 스킵되어야할 때 제어하려면 유용 - componentWillUpdate() - render() - componentDidUpdate() - componentWillUnmount()

componentWill* 메서드들은 componentDid* 메서드들이 호출된 뒤와 상태 변화 전에 호출된다.

[메서드 이름들은 Mac과 iOS의 Cocoa 프레임워크로 부터 온 큐를 채택한 것으로 보인다.]

기타 특징 콤포넌트 트리내에서, 데이터는 항상 밑으로 흐른다. 상위 콤포넌트는 상위에서 하위로 어떠한 데이터도 전달되는 하위 콤포넌트의 속성을 설정한다. 이것은 소유자 소유 쌍으로 명명되었다. 반면 사용자 이벤트(마우스, 키보드, 터치)들은 항상 그 사이에서 핸들리되지 않는 한 루트 콤포넌트들에 모든 방향으로 하위에로부터 떠오른다.

[그림]

render()에서 중간 DOM을 만들 때, 사용자는 하위 콤포넌트로 참조 속성을 할당할 수 있다. 그 후, 참조 속성을 사용해 상위로부터 그것을 참조할 수 있다. 이것은 아래 코드에 묘사되어 있다. [코드] 콤포넌트 메타데이터의 한 부분으로, 사용자는 초기 상태( getInitialState() )를 설정할 수 있는데, 라이프사이클 메소드 내에서 일찍이 확인했다. 사용자는 getDefaultProps() 와 속성의 기본 값을 설정하고 propTypes를 사용해 유효성 검사 규칙을 설정할 수 있다. 문서는 사용자가 수행할 수 있는 유효성 검증(타입 검사, 필수값 등)의 다른 종류의 좋은 보기를 제공한다.

React는 서로 다른 콤포넌트들에 주입할 수 있는 행동의 재사용 가능한 조각들로 Mixin의 개념으로 제공한다. 사용자는 콤포넌트의 mixins 속성을 사용해 mixins을 전달할 수 있다.

이제 이 기능을 활용한 포괄적인 콤포넌트를 구성하고 실제화해보자.

React를 활용한 도형 편집기 이 예제에서, 우리는 도형을 만들기 위한 간단한 DSL 을 채택한 편집기를 만들 것이다. 타이핑할 때, 사용자는 옆에서 대응하는 것을 실시간으로 볼 수 있다. DSL은 세가지 모양을 생성한다. : 타원, 직사각형, 텍스트. 각 모양은 스타일 속성의 무리와 함께 별도의 줄에 쓰여진다. 구문은 CSS 의 약간을 도입해 간단하다. 라인을 해석하기 위해 다음과 같은 정규식을 사용한다.

varshapeRegex = /(rect|ellipse|text)(\s[a-z]+:\s[a-z0-9]+;)*/i;

[코드] 아래의 출력을 생성 [그림]

설정 좋다. 가서 편집기를 만들자. 우리는 HTML 파일( index.html )로 시작할 수 있는데, 최상 레벨 마크업에 넣고 라이브러리와 애플리케이션 스크립트들을 인클루드 한 것이다.

[코드]

위 코드에서, div 컨테이너는 DOM을 만든 React를 보유하고 있다. 이 애플리케이션 스크립트는 /build 디렉터리에서 인클루드 된다. 우리는 우리 콤포넌트 내의 JSX를 사용하고 명령행 감시 ( jsx )를 사용해 /build 에 변환된 JS로 넣는다. 감시 명령은 react 도구 NPM 모듈인 것을 유의하자.

jsx –watchsrc/ build/

편집기는 아래에 나열된 콤포넌트들의 집합으로 나뉜다.

ShapeEditor : 콤포넌트 트리의 루트 콤포넌트 ShapeCanvas : 모양 콤포넌트 생성 담당(타원, 사각형, 텍스트). ShapeEditor에 포함됨. ShapeParser : 모양 정의 목록을 추출하고 텍스트 파싱 처리. 앞서 본 정규식에서 라인 바이 라인으로 파싱함. 잘못된 행은 무시. 실제 콤포넌트가 아닌 JS 객체 헬퍼로 ShapeEditor에 의해 사용됨. Ellipse, Rectangle, Text : 모양 콤포넌트. ShapeCanvas 의 하위 요소가 됨. ShapePropertyMixin : 모양 정의에서 발견된 스타일을 추출하기 위한 헬퍼 함수 제공. mixins 속성을 사용한 세가지의 모양 콤포넌트로 혼합되어 들어감. 앱 : 편집기의 진입점. 루트 콤포넌트(ShapeEditor)를 생성하고 사용자가 드롭 다운에서 모양 샘플을 선택하도록 함. 이 요소들의 관게는 주석 콤포넌트 트리에 나타남. [그림]

ShapeEditor 콤포넌트 ShapeEditor 로 시작되는 콤포넌트의 예를 보자.

[코드]

이름에서 알 수 있듯이, ShapeEditor 는 <textarea/> 를 만듬으로써 편집 경험을 제공하고, <ShapeCanvas>에서 실시간 피드백을 준다. <textarea/> 에서 onChange 이벤트 및 모든 변화에 대기하고(Reace에서 이벤트는 camel case 로 명명된다) 콤포넌트 상태의 텍스트 속성을 설정한다. 앞서 언급했듯이, setState()를 사용하여 상태를 설정할 때, reader는 자동으로 호출된다. 이 경우 ShapeEditor 의 render()는 상태에서 텍스트를 파싱하고 모양을 재생성한다. 빈 텍스트의 초기 상태로 시작할 때, getInitialState() 후크내에서 설정된다. 도형을 설정하기 위한 텍스트 파싱에서 ShapeParser의 인스턴스를 사용한다. React 에서 초점이 맞춰진 논의를 유지하기 위한 파서의 설명은 남겨 두었다. 파서 인스턴스는 componentWillMount() 후크에서 생성된다. 콤포넌트가 마운트 되기 전에 호출되고 어떠한 초기화도 처음 렌더링이 발생하기 전에 좋은 위치이다. render() 메소드를 통해 복잡한 프로세싱을 처리하는게 권장된다. 이벤트 핸들러는 render가 모든 코어 로직을 위한 허브일 때 상태를 설정한다. ShapeEditor는 render()의 내부를 파싱하는 아이디어를 사용하고 ShapeCanvas 의 모양 속성을 설정하는 것으로 탐지된 모양을 전달한다. 이것은 소유자(ShapeEditor)가 소유된 (ShapeCanvas)로 콤포넌트 트리에서 데이터 흐름을 전달하는 방법이다.

여기서 마지막으로 주의해야할 것은 JSX → JS 변환 지시자를 첫번째 라인에 넣어야 한다는 것이다.

모양 생성을 위한 ShapeCanvas 다음으로, 우리는 ShapeCanvas 와 타원, 사각형 및 텍스트 콤포넌트로 이동한다.

p> ShapeCanvas 는 모양 정의에서 <Ellipse/>, <Rectangle/>과 <Text/> 콤포넌트를 만드는 핵심이라고 할 수 있다.(this.props.shapes). 각 모양에서, 우리는 속성 표현으로 속성들을 파싱하는 것으로 전달한다. 속성={shape.properties}.

[코드] 여기에 다른 한가지는ShapeEditor에 가지고 있는 것처럼 콤포넌트 트리가 정적이지 않다는 것이다. 대신 동적 모양에 전달을 통해 반복에 의해 발생된다. 우리는 보여줄 게 아무것도 없을 때 “모양이 없음” 메시지를 보게된다.

모양 : 타원, 사각형, 텍스트 모양은 스타일에서만 다르고 거의 동일한 구조를 가진다. 스타일 생성을 제어하는 ShapePropertyMixin 의 사용을 생성한다.

이것은 타원이다. [코드] extractStyle()을 위한 구현은 ShapePropertyMixin에 의해 제공된다. 사각형 콤포넌트는 suit을 따르고 border-radius 스타일이 없다. 텍스트 콤포넌트는 <div/>를 위한 내부 텍스트를 설정하는 값을 호출한 별도 속성을 갖는다.

여기의 텍스트는 명확하다: [코드]

App.js 와 함께 묶기 app.js는 함께 사용할 수 있다. 여기서는 루트 콤포넌트, ShapeEditor를 렌더링하고 샘플 모양 간에 전환하는 지원을 제공한다. 드롭다운에서 다른 샘플을 선택했을 때, 우리는 ShapeEditor에 미리 정의된 텍스트를 로드하고 ShapeCanvas에 업데이트 한다. 이 것은 readShapes() 메소드에서 일어난다. [코드] 창조적인 면을 연습하기 위해 Shape Editor를 사용해 만든 로봇이다. [그림]

React vs AngularJS

  • AngularJS 는 MVC Framework, React는 V에 집중함
  • 컴포넌트 구현 과정의 차이점
    • AngularJS: 템플릿을 문자열로 정의. link 함수로 데이터 매핑 필요
    • React: JSX, 혹은 Javascript로 템플릿 정의, link 함수 같은 것은 없음. render가 필요한 부분을 알아서 잘 바꿔줌
  • 개념 이해
    • modules, controllers, directives, scopes, templates, linking functions 에 대한 이해가 필요
    • React: component, state만 이해하면 됨
lecture/om/react.txt · Last modified: 2019/02/04 14:26 (external edit)