react js 1

17.03.10, Jaekwang

The Basics of

React란? 자바스크립트 라이브러리!

클라이어트구조화

UI 라이브러리

http://blog.gaerae.com/2016/04/hello-react.html

React 특징

모델(Model)과 뷰(View)의 수가 커지면데이터의 흐름이 양방향으로 이루어질 수록 복잡도 증가됩니다.

1. One-way data flow

Angular.js의 양방향 데이터 바인딩은 코드를 줄여주고 사용하기 편하지만,

규모가 커질수록 데이터의 흐름을 추적하기 힘들다는 단점이 있었습니다.

단방향 데이터 바인딩으로 데이터 흐름의 추적이 편리해집니다.

2.Virtual DOM

DOM을 조작하는 것은 많은 비용이 든다.

Javascript에 DOM과 유사한 Object를 만들고 조작하면 빠르다.

DOM 조작을 최소화 할 수 있도록

Virtual DOM을 만들고 꼭 변화해야하는부분만 바꾸는 방식

Virtual DOM

VIEWDOM

Virtual DOM

VIEWDOM

Virtual DOM

DOM

VirtualDOM

Virtual DOM

DOM

VirtualDOM

VirtualDOM

Virtual DOM

DOM

VirtualDOM

VirtualDOM

Diff

그래서 어떻게 Javascript로

유사 DOM object을 어떻게 만든다는거지?

XML의 큰 장점 중 하나가 사용자 정의 태그를 사용할 수 있다는 점입니다.

JSX(Javascript XML)

React 에서 위와 같은 방식으로 사용할 수 있습니다.

Virtual DOM를 사용해서 빠른 효과를 얻는 것 뿐만 아니라 <div></div>와 같은 의미없는 마크업을 줄일 수 있는 부가적인 효과도 얻을 수 있습니다.

with Code

1. 모든 React.Component 에는 render 메소드가 있는데, 이 메서드는 컴포넌트가 어떻게 생길지 알려줍니다.

2. ReactDOM은 실제 페이지에 JSX 형태의 코드를 렌더링 할 때 사용합니다.

[ 규칙 ]

1. 컨테이너 엘레멘트 하위에 존재해야한다.2. 번수 : 사용 { } 를 사용3. 스타일 : 카멜케이스4. 주석 { /* … */ }

JSX를 사용보자.

Props- 부모 컴포넌트에서 자식 컴포넌트로 내려오는 데이터에서 사용한다.

- 컴포넌트 내부의 변하지 않는 데이터를 다룰때 사용한다.

- 읽기 전용(Readonly)처럼 사용된다.

State- 컴포넌트 내부에서의 유동적인 데이터를 표현할 때 사용

- 초기 설정이 필수: 생성자(constructor)에서 this.state = { }

- 값 수정시에는 this.setState({...})로 진행

자식 Element에서 부모 Element로Data 를 전달하려면?

function을 넘겨서 event 통해서 조작한다.

Data flowComponent

Component

Props

Component

ComponentComponent Component

Props

Props

Props PropsState State

Data flowComponent

Component

Props

Component

ComponentComponent Component

Props

Props

Props PropsState

State

LifeCycle

shouldComponentUpdateprop 혹은 state 가 변경 되었을 때, 리렌더링을 할지 말지 정하는 메소드입니다.

componentWillUpdate컴포넌트가 업데이트 되기 전에 실행됩니다.

이 메소드 안에서는 this.setState() 를 사용하면 무한루프에 빠져들게 됩니다.

componentDidMount컴포넌트가 만들어지고 첫 렌더링을 다 마친 후 실행되는 메소드입니다.이 안에서 다른 JavaScript 사용하거나 AJAX 처리 주로 넣습니다.

감사합니다.

참고 자료

도서- 프로 리엑트

웹사이트- http://blog.coderifleman.com/2015/06/23/learning-react-1/- https://www.youtube.com/channel/UCmMgRlN-3GKQ_CH7cOtLdvg- https://www.codementor.io/reactjs/tutorial/reactjs-vs-angular-js-performance-comparison-knockout- http://webframeworks.kr/tutorials/translate/virtual-dom/- http://blog.coderifleman.com/2015/06/23/learning-react-1/- stackoverflow, etc blog

영상 : - https://www.youtube.com/watch?v=n8Blhqhcx_w&t=3659s

http://serviceapi.rmcnmv.naver.com/flash/outKeyPlayer.nhn?vid=AF21005C8C167BEA4B5EA26D7F39FD5EFBC1&outKey=V124e1e36bca5003c98025508428f425ce66c2a197176d9421f195508428f425ce66c&controlBarMovable=true&jsCallable=true&skinName=tvcast_white

- https://www.inflearn.com/course-status-2/

슬라이드 : - https://www.slideshare.net/AndrewHull/react-js-and-why-its-awesome- https://www.slideshare.net/taggon/reactjs-55995670