SlideShare a Scribd company logo
1 of 26
Download to read offline
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
Virtual
DOM
Virtual DOM
DOM
Virtual
DOM
Virtual
DOM
Virtual DOM
DOM
Virtual
DOM
Virtual
DOM
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 flow
Component
Component
Props
Component
ComponentComponent Component
Props
Props
Props Props
State State
Data flow
Component
Component
Props
Component
ComponentComponent Component
Props
Props
Props Props
State
State
LifeCycle
React js   1
shouldComponentUpdate
prop 혹은 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=V124e1e3
6bca5003c98025508428f425ce66c2a197176d9421f195508428f425ce66c&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

More Related Content

Viewers also liked

Python Programming: Function
Python Programming: FunctionPython Programming: Function
Python Programming: FunctionChan Shik Lim
 
Logcat과 함께 하는 모바일 웹 디버깅
Logcat과 함께 하는 모바일 웹 디버깅Logcat과 함께 하는 모바일 웹 디버깅
Logcat과 함께 하는 모바일 웹 디버깅JinKwon Lee
 
아카마이 CDN 과 함께, 마음이 편해지는 인프라 설계
아카마이 CDN 과 함께, 마음이 편해지는 인프라 설계아카마이 CDN 과 함께, 마음이 편해지는 인프라 설계
아카마이 CDN 과 함께, 마음이 편해지는 인프라 설계Seung Heun Noh
 
[DevOn 2013] Backbone.js로 능동적 M-V 디자인 구현하기
[DevOn 2013] Backbone.js로 능동적  M-V 디자인 구현하기[DevOn 2013] Backbone.js로 능동적  M-V 디자인 구현하기
[DevOn 2013] Backbone.js로 능동적 M-V 디자인 구현하기Gyutae Jo
 
Django로 배우는 쉽고 빠른 웹개발 study 자료
Django로 배우는 쉽고 빠른 웹개발 study 자료Django로 배우는 쉽고 빠른 웹개발 study 자료
Django로 배우는 쉽고 빠른 웹개발 study 자료Han Sung Kim
 
KotlinJS Overview - TwiceRound #001
KotlinJS Overview - TwiceRound #001KotlinJS Overview - TwiceRound #001
KotlinJS Overview - TwiceRound #001Lee WonJae
 
[분석]워드임베딩과 인공신경망을 이용한 개인 맞춤형 레시피 추천
[분석]워드임베딩과 인공신경망을 이용한 개인 맞춤형 레시피 추천[분석]워드임베딩과 인공신경망을 이용한 개인 맞춤형 레시피 추천
[분석]워드임베딩과 인공신경망을 이용한 개인 맞춤형 레시피 추천BOAZ Bigdata
 
2016 경주지진 트위터 네트워크 분석
2016 경주지진 트위터 네트워크 분석2016 경주지진 트위터 네트워크 분석
2016 경주지진 트위터 네트워크 분석Han Woo PARK
 
Raspberry Pi를 이용한 얼굴 표정과 감정인식 시스템 개발
Raspberry Pi를 이용한 얼굴 표정과 감정인식 시스템 개발Raspberry Pi를 이용한 얼굴 표정과 감정인식 시스템 개발
Raspberry Pi를 이용한 얼굴 표정과 감정인식 시스템 개발Hyunmin Kim
 
AWS 천재가 된 홍대리 10가지 팁:: Megazone 박세진 ::AWS Summit Seoul 2016
AWS 천재가 된 홍대리 10가지 팁:: Megazone 박세진 ::AWS Summit Seoul 2016AWS 천재가 된 홍대리 10가지 팁:: Megazone 박세진 ::AWS Summit Seoul 2016
AWS 천재가 된 홍대리 10가지 팁:: Megazone 박세진 ::AWS Summit Seoul 2016Amazon Web Services Korea
 
모바일 시대의 차세대 성장동력으로 떠오르다 Iot
모바일 시대의 차세대 성장동력으로 떠오르다 Iot모바일 시대의 차세대 성장동력으로 떠오르다 Iot
모바일 시대의 차세대 성장동력으로 떠오르다 Iot메가트렌드랩 megatrendlab
 
Ibm과 nvidia가 제안하는 딥러닝 플랫폼
Ibm과 nvidia가 제안하는 딥러닝 플랫폼Ibm과 nvidia가 제안하는 딥러닝 플랫폼
Ibm과 nvidia가 제안하는 딥러닝 플랫폼ibmrep
 
20170227 파이썬으로 챗봇_만들기
20170227 파이썬으로 챗봇_만들기20170227 파이썬으로 챗봇_만들기
20170227 파이썬으로 챗봇_만들기Kim Sungdong
 
Python Programming: Tuning and Optimization
Python Programming: Tuning and OptimizationPython Programming: Tuning and Optimization
Python Programming: Tuning and OptimizationChan Shik Lim
 
Node-express 채팅 서버 개발기
Node-express 채팅 서버 개발기Node-express 채팅 서버 개발기
Node-express 채팅 서버 개발기정웅 박
 

Viewers also liked (17)

Python Programming: Function
Python Programming: FunctionPython Programming: Function
Python Programming: Function
 
Logcat과 함께 하는 모바일 웹 디버깅
Logcat과 함께 하는 모바일 웹 디버깅Logcat과 함께 하는 모바일 웹 디버깅
Logcat과 함께 하는 모바일 웹 디버깅
 
아카마이 CDN 과 함께, 마음이 편해지는 인프라 설계
아카마이 CDN 과 함께, 마음이 편해지는 인프라 설계아카마이 CDN 과 함께, 마음이 편해지는 인프라 설계
아카마이 CDN 과 함께, 마음이 편해지는 인프라 설계
 
[DevOn 2013] Backbone.js로 능동적 M-V 디자인 구현하기
[DevOn 2013] Backbone.js로 능동적  M-V 디자인 구현하기[DevOn 2013] Backbone.js로 능동적  M-V 디자인 구현하기
[DevOn 2013] Backbone.js로 능동적 M-V 디자인 구현하기
 
Django로 배우는 쉽고 빠른 웹개발 study 자료
Django로 배우는 쉽고 빠른 웹개발 study 자료Django로 배우는 쉽고 빠른 웹개발 study 자료
Django로 배우는 쉽고 빠른 웹개발 study 자료
 
KotlinJS Overview - TwiceRound #001
KotlinJS Overview - TwiceRound #001KotlinJS Overview - TwiceRound #001
KotlinJS Overview - TwiceRound #001
 
[분석]워드임베딩과 인공신경망을 이용한 개인 맞춤형 레시피 추천
[분석]워드임베딩과 인공신경망을 이용한 개인 맞춤형 레시피 추천[분석]워드임베딩과 인공신경망을 이용한 개인 맞춤형 레시피 추천
[분석]워드임베딩과 인공신경망을 이용한 개인 맞춤형 레시피 추천
 
2016 경주지진 트위터 네트워크 분석
2016 경주지진 트위터 네트워크 분석2016 경주지진 트위터 네트워크 분석
2016 경주지진 트위터 네트워크 분석
 
Raspberry Pi를 이용한 얼굴 표정과 감정인식 시스템 개발
Raspberry Pi를 이용한 얼굴 표정과 감정인식 시스템 개발Raspberry Pi를 이용한 얼굴 표정과 감정인식 시스템 개발
Raspberry Pi를 이용한 얼굴 표정과 감정인식 시스템 개발
 
AWS 천재가 된 홍대리 10가지 팁:: Megazone 박세진 ::AWS Summit Seoul 2016
AWS 천재가 된 홍대리 10가지 팁:: Megazone 박세진 ::AWS Summit Seoul 2016AWS 천재가 된 홍대리 10가지 팁:: Megazone 박세진 ::AWS Summit Seoul 2016
AWS 천재가 된 홍대리 10가지 팁:: Megazone 박세진 ::AWS Summit Seoul 2016
 
모바일 시대의 차세대 성장동력으로 떠오르다 Iot
모바일 시대의 차세대 성장동력으로 떠오르다 Iot모바일 시대의 차세대 성장동력으로 떠오르다 Iot
모바일 시대의 차세대 성장동력으로 떠오르다 Iot
 
Ibm과 nvidia가 제안하는 딥러닝 플랫폼
Ibm과 nvidia가 제안하는 딥러닝 플랫폼Ibm과 nvidia가 제안하는 딥러닝 플랫폼
Ibm과 nvidia가 제안하는 딥러닝 플랫폼
 
20170227 파이썬으로 챗봇_만들기
20170227 파이썬으로 챗봇_만들기20170227 파이썬으로 챗봇_만들기
20170227 파이썬으로 챗봇_만들기
 
Python Programming: Tuning and Optimization
Python Programming: Tuning and OptimizationPython Programming: Tuning and Optimization
Python Programming: Tuning and Optimization
 
Node-express 채팅 서버 개발기
Node-express 채팅 서버 개발기Node-express 채팅 서버 개발기
Node-express 채팅 서버 개발기
 
국내외 보건의료 빅데이터 현황 및 과제
국내외 보건의료 빅데이터 현황 및 과제국내외 보건의료 빅데이터 현황 및 과제
국내외 보건의료 빅데이터 현황 및 과제
 
SlideShare 101
SlideShare 101SlideShare 101
SlideShare 101
 

Similar to React js 1

XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기
XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기
XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기XpressEngine
 
Sql 중심 코드 탈피 발표자료
Sql 중심 코드 탈피 발표자료Sql 중심 코드 탈피 발표자료
Sql 중심 코드 탈피 발표자료ssuser776e2d
 
Sql 중심 코드 탈피
Sql 중심 코드 탈피Sql 중심 코드 탈피
Sql 중심 코드 탈피ssuser776e2d
 
Jpa 쿼리 포함 자료
Jpa 쿼리 포함 자료Jpa 쿼리 포함 자료
Jpa 쿼리 포함 자료Hyosang Hong
 
Jpa 쿼리 포함 자료
Jpa 쿼리 포함 자료Jpa 쿼리 포함 자료
Jpa 쿼리 포함 자료Hyosang Hong
 
Better Scalable Flexible Soa Platform 0.8.0
Better Scalable Flexible Soa Platform 0.8.0Better Scalable Flexible Soa Platform 0.8.0
Better Scalable Flexible Soa Platform 0.8.0Kidong Lee
 
ReactJS로 시작하는 멀티플랫폼 개발하기
ReactJS로 시작하는 멀티플랫폼 개발하기ReactJS로 시작하는 멀티플랫폼 개발하기
ReactJS로 시작하는 멀티플랫폼 개발하기Taegon Kim
 
React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기WebFrameworks
 
0222 사내세미나_오정민 스프링인액션
0222 사내세미나_오정민 스프링인액션0222 사내세미나_오정민 스프링인액션
0222 사내세미나_오정민 스프링인액션DataUs
 
[오픈소스컨설팅]Spring 3.1 Core
[오픈소스컨설팅]Spring 3.1 Core [오픈소스컨설팅]Spring 3.1 Core
[오픈소스컨설팅]Spring 3.1 Core Ji-Woong Choi
 
Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Kim Hunmin
 
자바 웹 개발 시작하기 (4주차 : MVC)
자바 웹 개발 시작하기 (4주차 : MVC)자바 웹 개발 시작하기 (4주차 : MVC)
자바 웹 개발 시작하기 (4주차 : MVC)DK Lee
 
Java script 강의자료_ed13
Java script 강의자료_ed13Java script 강의자료_ed13
Java script 강의자료_ed13hungrok
 
E-Gov 기반 Mobile Web Friendly 개발
E-Gov 기반 Mobile Web Friendly 개발E-Gov 기반 Mobile Web Friendly 개발
E-Gov 기반 Mobile Web Friendly 개발JavaCommunity.Org
 
스프링군살없이세팅하기(The way to setting the Spring framework for web.)
스프링군살없이세팅하기(The way to setting the Spring framework for web.)스프링군살없이세팅하기(The way to setting the Spring framework for web.)
스프링군살없이세팅하기(The way to setting the Spring framework for web.)EunChul Shin
 
파이썬 플라스크 이해하기
파이썬 플라스크 이해하기 파이썬 플라스크 이해하기
파이썬 플라스크 이해하기 Yong Joon Moon
 
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)SangIn Choung
 
자바 웹 개발 시작하기 (5주차 : 스프링 프래임워크)
자바 웹 개발 시작하기 (5주차 : 스프링 프래임워크)자바 웹 개발 시작하기 (5주차 : 스프링 프래임워크)
자바 웹 개발 시작하기 (5주차 : 스프링 프래임워크)DK Lee
 
2007년 제8회 JCO 컨퍼런스 POJO 프로그래밍 발표 자료
2007년 제8회 JCO 컨퍼런스 POJO 프로그래밍 발표 자료2007년 제8회 JCO 컨퍼런스 POJO 프로그래밍 발표 자료
2007년 제8회 JCO 컨퍼런스 POJO 프로그래밍 발표 자료beom kyun choi
 

Similar to React js 1 (20)

XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기
XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기
XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기
 
Sql 중심 코드 탈피 발표자료
Sql 중심 코드 탈피 발표자료Sql 중심 코드 탈피 발표자료
Sql 중심 코드 탈피 발표자료
 
Sql 중심 코드 탈피
Sql 중심 코드 탈피Sql 중심 코드 탈피
Sql 중심 코드 탈피
 
Jpa 쿼리 포함 자료
Jpa 쿼리 포함 자료Jpa 쿼리 포함 자료
Jpa 쿼리 포함 자료
 
Jpa 쿼리 포함 자료
Jpa 쿼리 포함 자료Jpa 쿼리 포함 자료
Jpa 쿼리 포함 자료
 
Better Scalable Flexible Soa Platform 0.8.0
Better Scalable Flexible Soa Platform 0.8.0Better Scalable Flexible Soa Platform 0.8.0
Better Scalable Flexible Soa Platform 0.8.0
 
ReactJS로 시작하는 멀티플랫폼 개발하기
ReactJS로 시작하는 멀티플랫폼 개발하기ReactJS로 시작하는 멀티플랫폼 개발하기
ReactJS로 시작하는 멀티플랫폼 개발하기
 
React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기
 
0222 사내세미나_오정민 스프링인액션
0222 사내세미나_오정민 스프링인액션0222 사내세미나_오정민 스프링인액션
0222 사내세미나_오정민 스프링인액션
 
[오픈소스컨설팅]Spring 3.1 Core
[오픈소스컨설팅]Spring 3.1 Core [오픈소스컨설팅]Spring 3.1 Core
[오픈소스컨설팅]Spring 3.1 Core
 
Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까?
 
자바 웹 개발 시작하기 (4주차 : MVC)
자바 웹 개발 시작하기 (4주차 : MVC)자바 웹 개발 시작하기 (4주차 : MVC)
자바 웹 개발 시작하기 (4주차 : MVC)
 
Java script 강의자료_ed13
Java script 강의자료_ed13Java script 강의자료_ed13
Java script 강의자료_ed13
 
E-Gov 기반 Mobile Web Friendly 개발
E-Gov 기반 Mobile Web Friendly 개발E-Gov 기반 Mobile Web Friendly 개발
E-Gov 기반 Mobile Web Friendly 개발
 
스프링군살없이세팅하기(The way to setting the Spring framework for web.)
스프링군살없이세팅하기(The way to setting the Spring framework for web.)스프링군살없이세팅하기(The way to setting the Spring framework for web.)
스프링군살없이세팅하기(The way to setting the Spring framework for web.)
 
파이썬 플라스크 이해하기
파이썬 플라스크 이해하기 파이썬 플라스크 이해하기
파이썬 플라스크 이해하기
 
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)
 
자바 웹 개발 시작하기 (5주차 : 스프링 프래임워크)
자바 웹 개발 시작하기 (5주차 : 스프링 프래임워크)자바 웹 개발 시작하기 (5주차 : 스프링 프래임워크)
자바 웹 개발 시작하기 (5주차 : 스프링 프래임워크)
 
2007년 제8회 JCO 컨퍼런스 POJO 프로그래밍 발표 자료
2007년 제8회 JCO 컨퍼런스 POJO 프로그래밍 발표 자료2007년 제8회 JCO 컨퍼런스 POJO 프로그래밍 발표 자료
2007년 제8회 JCO 컨퍼런스 POJO 프로그래밍 발표 자료
 
[Codelab 2017] ReactJS 기초
[Codelab 2017] ReactJS 기초[Codelab 2017] ReactJS 기초
[Codelab 2017] ReactJS 기초
 

React js 1