Submit Search
Upload
01 introduce-react-js
•
0 likes
•
62 views
J
Jay Lee
Follow
김민준님의 리엑트를 다루는 기술을 읽고 작성한 세미나 자료입니다.
Read less
Read more
Internet
Report
Share
Report
Share
1 of 46
Download now
Download to read offline
Recommended
Basic of web ref.웹을지탱하는기술_02
Basic of web ref.웹을지탱하는기술_02
SangHun Lee
[OCI 새소식] OCI Burstable Instance
[OCI 새소식] OCI Burstable Instance
Taewan Kim
웹(자바기준)의 전반적인 이해
웹(자바기준)의 전반적인 이해
JAEHYUN LIM
Java script 신입교육
Java script 신입교육
준성 황
킴스큐Rb 설치
킴스큐Rb 설치
Gitaek kwon
딜리버리퀸
딜리버리퀸
eunji525
『풀스택 개발자를 위한 MEAN 스택 입문』 - 미리보기
『풀스택 개발자를 위한 MEAN 스택 입문』 - 미리보기
복연 이
Deploying serverless node.js microservices
Deploying serverless node.js microservices
Harrison Jung
Recommended
Basic of web ref.웹을지탱하는기술_02
Basic of web ref.웹을지탱하는기술_02
SangHun Lee
[OCI 새소식] OCI Burstable Instance
[OCI 새소식] OCI Burstable Instance
Taewan Kim
웹(자바기준)의 전반적인 이해
웹(자바기준)의 전반적인 이해
JAEHYUN LIM
Java script 신입교육
Java script 신입교육
준성 황
킴스큐Rb 설치
킴스큐Rb 설치
Gitaek kwon
딜리버리퀸
딜리버리퀸
eunji525
『풀스택 개발자를 위한 MEAN 스택 입문』 - 미리보기
『풀스택 개발자를 위한 MEAN 스택 입문』 - 미리보기
복연 이
Deploying serverless node.js microservices
Deploying serverless node.js microservices
Harrison Jung
이희영, 글로벌 원빌드 모바일 게임 런칭과 라이브 개발, NDC2016
이희영, 글로벌 원빌드 모바일 게임 런칭과 라이브 개발, NDC2016
devCAT Studio, NEXON
5.ref 101
5.ref 101
Daniel Lim
20201223 jquery
20201223 jquery
sonhyungsoo
Mean stack Start
Mean stack Start
Kenu, GwangNam Heo
CSS3 천기누설
CSS3 천기누설
Toby Yun
Servlet&jsp 1장
Servlet&jsp 1장
JeongBong Kim
잭블랙이블랙잭을한다 - 최종발표
잭블랙이블랙잭을한다 - 최종발표
Seokmin No
킴스큐스팍 Vm 보안설정하기 mysql root비밀번호 변경
킴스큐스팍 Vm 보안설정하기 mysql root비밀번호 변경
Gitaek kwon
사투리 SMS 서비스 기획안
사투리 SMS 서비스 기획안
Seung Min Shin
비개발자를 위한 Javascript 알아가기 #4.1
비개발자를 위한 Javascript 알아가기 #4.1
민태 김
[D2 campus]착 하면 척! chak 서비스 개발기
[D2 campus]착 하면 척! chak 서비스 개발기
NAVER D2
서블릿(servlet)
서블릿(servlet)
JungHoon Lee
XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기
XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기
XpressEngine
코드잇-리액트-특강.pdf
코드잇-리액트-특강.pdf
이정환
프론트엔드 개발 첫걸음
프론트엔드 개발 첫걸음
DataUs
20170202 D2 발표
20170202 D2 발표
Suhjin Park
ReactJS로 시작하는 멀티플랫폼 개발하기
ReactJS로 시작하는 멀티플랫폼 개발하기
Taegon Kim
React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기
WebFrameworks
React
React
MinJae Kang
Angular2 톺아보기
Angular2 톺아보기
철민 배
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
종훈 박
LucideWorks Banana 소개
LucideWorks Banana 소개
SuHyun Jeon
More Related Content
What's hot
이희영, 글로벌 원빌드 모바일 게임 런칭과 라이브 개발, NDC2016
이희영, 글로벌 원빌드 모바일 게임 런칭과 라이브 개발, NDC2016
devCAT Studio, NEXON
5.ref 101
5.ref 101
Daniel Lim
20201223 jquery
20201223 jquery
sonhyungsoo
Mean stack Start
Mean stack Start
Kenu, GwangNam Heo
CSS3 천기누설
CSS3 천기누설
Toby Yun
Servlet&jsp 1장
Servlet&jsp 1장
JeongBong Kim
잭블랙이블랙잭을한다 - 최종발표
잭블랙이블랙잭을한다 - 최종발표
Seokmin No
킴스큐스팍 Vm 보안설정하기 mysql root비밀번호 변경
킴스큐스팍 Vm 보안설정하기 mysql root비밀번호 변경
Gitaek kwon
사투리 SMS 서비스 기획안
사투리 SMS 서비스 기획안
Seung Min Shin
비개발자를 위한 Javascript 알아가기 #4.1
비개발자를 위한 Javascript 알아가기 #4.1
민태 김
[D2 campus]착 하면 척! chak 서비스 개발기
[D2 campus]착 하면 척! chak 서비스 개발기
NAVER D2
서블릿(servlet)
서블릿(servlet)
JungHoon Lee
What's hot
(12)
이희영, 글로벌 원빌드 모바일 게임 런칭과 라이브 개발, NDC2016
이희영, 글로벌 원빌드 모바일 게임 런칭과 라이브 개발, NDC2016
5.ref 101
5.ref 101
20201223 jquery
20201223 jquery
Mean stack Start
Mean stack Start
CSS3 천기누설
CSS3 천기누설
Servlet&jsp 1장
Servlet&jsp 1장
잭블랙이블랙잭을한다 - 최종발표
잭블랙이블랙잭을한다 - 최종발표
킴스큐스팍 Vm 보안설정하기 mysql root비밀번호 변경
킴스큐스팍 Vm 보안설정하기 mysql root비밀번호 변경
사투리 SMS 서비스 기획안
사투리 SMS 서비스 기획안
비개발자를 위한 Javascript 알아가기 #4.1
비개발자를 위한 Javascript 알아가기 #4.1
[D2 campus]착 하면 척! chak 서비스 개발기
[D2 campus]착 하면 척! chak 서비스 개발기
서블릿(servlet)
서블릿(servlet)
Similar to 01 introduce-react-js
XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기
XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기
XpressEngine
코드잇-리액트-특강.pdf
코드잇-리액트-특강.pdf
이정환
프론트엔드 개발 첫걸음
프론트엔드 개발 첫걸음
DataUs
20170202 D2 발표
20170202 D2 발표
Suhjin Park
ReactJS로 시작하는 멀티플랫폼 개발하기
ReactJS로 시작하는 멀티플랫폼 개발하기
Taegon Kim
React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기
WebFrameworks
React
React
MinJae Kang
Angular2 톺아보기
Angular2 톺아보기
철민 배
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
종훈 박
LucideWorks Banana 소개
LucideWorks Banana 소개
SuHyun Jeon
React js 1
React js 1
JaeKwang Jung
이정환_구름에듀_특강.pdf
이정환_구름에듀_특강.pdf
이정환
[부스트캠프 웹・모바일 7기 Tech Talk]안병준_프론트엔드,어쩌다 여기까지
[부스트캠프 웹・모바일 7기 Tech Talk]안병준_프론트엔드,어쩌다 여기까지
CONNECT FOUNDATION
1.react 101
1.react 101
Daniel Lim
Droid knights 2019 - (Large-scale App을 위한) Android Architecture 총정리
Droid knights 2019 - (Large-scale App을 위한) Android Architecture 총정리
Sa-ryong Kang
유니티3D 그리고 웹통신
유니티3D 그리고 웹통신
현욱 김
Virtual dom
Virtual dom
GyeongSeok Seo
이승재, 박경재, NDC Replay 제작기: static website, static backoffice, NDC2017
이승재, 박경재, NDC Replay 제작기: static website, static backoffice, NDC2017
devCAT Studio, NEXON
NET 최선단 기술에 의한 고성능 웹 애플리케이션
NET 최선단 기술에 의한 고성능 웹 애플리케이션
흥배 최
[경북] I'mcloud openlight
[경북] I'mcloud openlight
startupkorea
Similar to 01 introduce-react-js
(20)
XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기
XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기
코드잇-리액트-특강.pdf
코드잇-리액트-특강.pdf
프론트엔드 개발 첫걸음
프론트엔드 개발 첫걸음
20170202 D2 발표
20170202 D2 발표
ReactJS로 시작하는 멀티플랫폼 개발하기
ReactJS로 시작하는 멀티플랫폼 개발하기
React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기
React
React
Angular2 톺아보기
Angular2 톺아보기
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
LucideWorks Banana 소개
LucideWorks Banana 소개
React js 1
React js 1
이정환_구름에듀_특강.pdf
이정환_구름에듀_특강.pdf
[부스트캠프 웹・모바일 7기 Tech Talk]안병준_프론트엔드,어쩌다 여기까지
[부스트캠프 웹・모바일 7기 Tech Talk]안병준_프론트엔드,어쩌다 여기까지
1.react 101
1.react 101
Droid knights 2019 - (Large-scale App을 위한) Android Architecture 총정리
Droid knights 2019 - (Large-scale App을 위한) Android Architecture 총정리
유니티3D 그리고 웹통신
유니티3D 그리고 웹통신
Virtual dom
Virtual dom
이승재, 박경재, NDC Replay 제작기: static website, static backoffice, NDC2017
이승재, 박경재, NDC Replay 제작기: static website, static backoffice, NDC2017
NET 최선단 기술에 의한 고성능 웹 애플리케이션
NET 최선단 기술에 의한 고성능 웹 애플리케이션
[경북] I'mcloud openlight
[경북] I'mcloud openlight
More from Jay Lee
Https
Https
Jay Lee
04 component
04 component
Jay Lee
03 jsx
03 jsx
Jay Lee
02 install-react-js
02 install-react-js
Jay Lee
Codeveloper 개발기
Codeveloper 개발기
Jay Lee
Codeveloper
Codeveloper
Jay Lee
More from Jay Lee
(6)
Https
Https
04 component
04 component
03 jsx
03 jsx
02 install-react-js
02 install-react-js
Codeveloper 개발기
Codeveloper 개발기
Codeveloper
Codeveloper
01 introduce-react-js
1.
다같이 React를 이해해
봅시다. 리액트 소개 이재민 2018년 9월
2.
2018 자바스크립트로 대규모 애플리케이션을
개발할 수 있게 되었다. 1995
3.
4.
MVC, MVVM, MVM
. 대부분 Model과 View로 이루어진 프레임워크
5.
JSON data HTML
6.
likes를 1에서 2로
바꾼다면? JSON data HTML
7.
data를 변경하는 로직
DOM에 반영하는 로직(Mutate) JSON data HTML
8.
규모가 커진다면? 구조가 복잡하다면? 제대로
관리를 못한다면? 그런데...
9.
만약 Ju-eun에게서 메시지가
온다면?
10.
4개 요소이상의 View
반영..
11.
View를 관리하는것이 점점 힘들어진다...
12.
13.
과거의 DOM 새로운 데이터로 새로
만든 새로운 DOM 아주 간단한 원리
14.
더 이상 어떻게
View를 반영할지 고민할 필요가 없다!
15.
그런데 과연 이것이
효율적일까..? CPU 점유율도 높아지고... 메모리도 많이 들어가고..
16.
17.
리엑트에 대한 이해가
필요
18.
component
19.
component template !== 타 프레임워크의
template과는 다른 개념!
20.
template HTML Markup
문자열 반환… template은…
21.
하지만 component는 조금더 복잡하다.
22.
component 컴포넌트의 생김새 컴포넌트의 동작
방식 component
23.
component 렌더링 Browser
24.
초기 렌더링 리 렌더링 두개의
랜더링이 존재한다.
25.
render() { } 초기
렌더링 render함수로 렌더링 시작
26.
render() { } 초기
렌더링 render함수로 렌더링 시작 컴포넌트의 생김새 컴포넌트의 동작 방식 최상위 컴포넌트 해석
27.
render() { } 초기
렌더링 render함수로 렌더링 시작 최상위 컴포넌트 해석 자식 컴포넌트를 재귀 해석
28.
초기 렌더링 자식 컴포넌트를
재귀 해석 HTML 마크업 작성 DOM에 HTML 주입
29.
리 렌더링(조화단계) 데이터 변경시
리렌더링 시작
30.
리 렌더링(조화단계) 초기 렌더링과
같은 방식으로 트리 작성
31.
리 렌더링(조화단계) 현재 렌더링
트리 리 렌더링 트리 초기 렌더링 트리와 리 렌더링 트리를 비교
32.
리 렌더링(조화단계) 현재 렌더링
트리 리 렌더링 트리 변경된 부분만 변경
33.
Virtual DOM
34.
DOM Document Object Model
35.
DOM Document Object Model 트리
구조로 작성되며 원하는 node 를 선택적으로 제어 가능
36.
그럼 왜 Virtual
DOM 을 사용할까?
37.
그럼 왜 Virtual
DOM 을 사용할까? DOM은 느린가?
38.
그럼 왜 Virtual
DOM 을 사용할까? DOM은 느린가? DOM자체의 속도는 JS 속도와 큰 차이가 없다.
39.
그럼 왜 Virtual
DOM 을 사용할까? DOM은 느린가? DOM자체의 속도는 JS 속도와 큰 차이가 없다. But!,
40.
그럼 왜 Virtual
DOM 을 사용할까? DOM은 느린가? DOM자체의 속도는 JS 속도와 큰 차이가 없다. But!, 동적 UI구현시 너무 많은 연산 및 리페인팅 시간 허비
41.
Virtual DOM은 최소한의
처리와 효율을 위한 DOM을 Javascript로 추상화한 객체
42.
Virtual DOM을 이용한
DOM 업데이트 단계
43.
Virtual DOM을 이용한
DOM 업데이트 단계 1. 데이터를 업데이트 하면 전체 UI를 Virtual DOM 에 리 렌더링
44.
Virtual DOM을 이용한
DOM 업데이트 단계 1. 데이터를 업데이트 하면 전체 UI를 Virtual DOM 에 리 렌더링 2. 이전 Virtual DOM에 있던 내용과 현재내용을 비교
45.
Virtual DOM을 이용한
DOM 업데이트 단계 1. 데이터를 업데이트 하면 전체 UI를 Virtual DOM 에 리 렌더링 2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교 3. 바뀐 부분만 실제 DOM에 적용
46.
우리는 다음 문제를
해결하기 위해 리엑트를 만들었습니다 지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하기 -리엑트 메뉴얼-
Download now