react js 1
TRANSCRIPT
![Page 1: React js 1](https://reader031.vdocuments.net/reader031/viewer/2022021418/58ecea5f1a28ab92168b4649/html5/thumbnails/1.jpg)
17.03.10, Jaekwang
The Basics of
![Page 2: React js 1](https://reader031.vdocuments.net/reader031/viewer/2022021418/58ecea5f1a28ab92168b4649/html5/thumbnails/2.jpg)
React란? 자바스크립트 라이브러리!
클라이어트구조화
UI 라이브러리
![Page 3: React js 1](https://reader031.vdocuments.net/reader031/viewer/2022021418/58ecea5f1a28ab92168b4649/html5/thumbnails/3.jpg)
http://blog.gaerae.com/2016/04/hello-react.html
![Page 4: React js 1](https://reader031.vdocuments.net/reader031/viewer/2022021418/58ecea5f1a28ab92168b4649/html5/thumbnails/4.jpg)
React 특징
![Page 5: React js 1](https://reader031.vdocuments.net/reader031/viewer/2022021418/58ecea5f1a28ab92168b4649/html5/thumbnails/5.jpg)
모델(Model)과 뷰(View)의 수가 커지면데이터의 흐름이 양방향으로 이루어질 수록 복잡도 증가됩니다.
![Page 6: React js 1](https://reader031.vdocuments.net/reader031/viewer/2022021418/58ecea5f1a28ab92168b4649/html5/thumbnails/6.jpg)
1. One-way data flow
Angular.js의 양방향 데이터 바인딩은 코드를 줄여주고 사용하기 편하지만,
규모가 커질수록 데이터의 흐름을 추적하기 힘들다는 단점이 있었습니다.
단방향 데이터 바인딩으로 데이터 흐름의 추적이 편리해집니다.
![Page 7: React js 1](https://reader031.vdocuments.net/reader031/viewer/2022021418/58ecea5f1a28ab92168b4649/html5/thumbnails/7.jpg)
2.Virtual DOM
DOM을 조작하는 것은 많은 비용이 든다.
Javascript에 DOM과 유사한 Object를 만들고 조작하면 빠르다.
DOM 조작을 최소화 할 수 있도록
Virtual DOM을 만들고 꼭 변화해야하는부분만 바꾸는 방식
![Page 8: React js 1](https://reader031.vdocuments.net/reader031/viewer/2022021418/58ecea5f1a28ab92168b4649/html5/thumbnails/8.jpg)
Virtual DOM
VIEWDOM
![Page 9: React js 1](https://reader031.vdocuments.net/reader031/viewer/2022021418/58ecea5f1a28ab92168b4649/html5/thumbnails/9.jpg)
Virtual DOM
VIEWDOM
![Page 10: React js 1](https://reader031.vdocuments.net/reader031/viewer/2022021418/58ecea5f1a28ab92168b4649/html5/thumbnails/10.jpg)
Virtual DOM
DOM
VirtualDOM
![Page 11: React js 1](https://reader031.vdocuments.net/reader031/viewer/2022021418/58ecea5f1a28ab92168b4649/html5/thumbnails/11.jpg)
Virtual DOM
DOM
VirtualDOM
VirtualDOM
![Page 12: React js 1](https://reader031.vdocuments.net/reader031/viewer/2022021418/58ecea5f1a28ab92168b4649/html5/thumbnails/12.jpg)
Virtual DOM
DOM
VirtualDOM
VirtualDOM
Diff
![Page 13: React js 1](https://reader031.vdocuments.net/reader031/viewer/2022021418/58ecea5f1a28ab92168b4649/html5/thumbnails/13.jpg)
그래서 어떻게 Javascript로
유사 DOM object을 어떻게 만든다는거지?
![Page 14: React js 1](https://reader031.vdocuments.net/reader031/viewer/2022021418/58ecea5f1a28ab92168b4649/html5/thumbnails/14.jpg)
XML의 큰 장점 중 하나가 사용자 정의 태그를 사용할 수 있다는 점입니다.
JSX(Javascript XML)
React 에서 위와 같은 방식으로 사용할 수 있습니다.
Virtual DOM를 사용해서 빠른 효과를 얻는 것 뿐만 아니라 <div></div>와 같은 의미없는 마크업을 줄일 수 있는 부가적인 효과도 얻을 수 있습니다.
![Page 15: React js 1](https://reader031.vdocuments.net/reader031/viewer/2022021418/58ecea5f1a28ab92168b4649/html5/thumbnails/15.jpg)
with Code
![Page 16: React js 1](https://reader031.vdocuments.net/reader031/viewer/2022021418/58ecea5f1a28ab92168b4649/html5/thumbnails/16.jpg)
1. 모든 React.Component 에는 render 메소드가 있는데, 이 메서드는 컴포넌트가 어떻게 생길지 알려줍니다.
2. ReactDOM은 실제 페이지에 JSX 형태의 코드를 렌더링 할 때 사용합니다.
[ 규칙 ]
1. 컨테이너 엘레멘트 하위에 존재해야한다.2. 번수 : 사용 { } 를 사용3. 스타일 : 카멜케이스4. 주석 { /* … */ }
JSX를 사용보자.
![Page 17: React js 1](https://reader031.vdocuments.net/reader031/viewer/2022021418/58ecea5f1a28ab92168b4649/html5/thumbnails/17.jpg)
Props- 부모 컴포넌트에서 자식 컴포넌트로 내려오는 데이터에서 사용한다.
- 컴포넌트 내부의 변하지 않는 데이터를 다룰때 사용한다.
- 읽기 전용(Readonly)처럼 사용된다.
![Page 18: React js 1](https://reader031.vdocuments.net/reader031/viewer/2022021418/58ecea5f1a28ab92168b4649/html5/thumbnails/18.jpg)
State- 컴포넌트 내부에서의 유동적인 데이터를 표현할 때 사용
- 초기 설정이 필수: 생성자(constructor)에서 this.state = { }
- 값 수정시에는 this.setState({...})로 진행
![Page 19: React js 1](https://reader031.vdocuments.net/reader031/viewer/2022021418/58ecea5f1a28ab92168b4649/html5/thumbnails/19.jpg)
자식 Element에서 부모 Element로Data 를 전달하려면?
function을 넘겨서 event 통해서 조작한다.
![Page 20: React js 1](https://reader031.vdocuments.net/reader031/viewer/2022021418/58ecea5f1a28ab92168b4649/html5/thumbnails/20.jpg)
Data flowComponent
Component
Props
Component
ComponentComponent Component
Props
Props
Props PropsState State
![Page 21: React js 1](https://reader031.vdocuments.net/reader031/viewer/2022021418/58ecea5f1a28ab92168b4649/html5/thumbnails/21.jpg)
Data flowComponent
Component
Props
Component
ComponentComponent Component
Props
Props
Props PropsState
State
![Page 22: React js 1](https://reader031.vdocuments.net/reader031/viewer/2022021418/58ecea5f1a28ab92168b4649/html5/thumbnails/22.jpg)
LifeCycle
![Page 23: React js 1](https://reader031.vdocuments.net/reader031/viewer/2022021418/58ecea5f1a28ab92168b4649/html5/thumbnails/23.jpg)
![Page 24: React js 1](https://reader031.vdocuments.net/reader031/viewer/2022021418/58ecea5f1a28ab92168b4649/html5/thumbnails/24.jpg)
shouldComponentUpdateprop 혹은 state 가 변경 되었을 때, 리렌더링을 할지 말지 정하는 메소드입니다.
componentWillUpdate컴포넌트가 업데이트 되기 전에 실행됩니다.
이 메소드 안에서는 this.setState() 를 사용하면 무한루프에 빠져들게 됩니다.
componentDidMount컴포넌트가 만들어지고 첫 렌더링을 다 마친 후 실행되는 메소드입니다.이 안에서 다른 JavaScript 사용하거나 AJAX 처리 주로 넣습니다.
![Page 25: React js 1](https://reader031.vdocuments.net/reader031/viewer/2022021418/58ecea5f1a28ab92168b4649/html5/thumbnails/25.jpg)
감사합니다.
![Page 26: React js 1](https://reader031.vdocuments.net/reader031/viewer/2022021418/58ecea5f1a28ab92168b4649/html5/thumbnails/26.jpg)
참고 자료
도서- 프로 리엑트
웹사이트- 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