Submit Search
Upload
03 jsx
•
0 likes
•
42 views
J
Jay Lee
Follow
김민준님의 리엑트를 다루는 기술을 읽고 작성한 세미나 자료입니다.
Read less
Read more
Internet
Report
Share
Report
Share
1 of 36
Download now
Download to read offline
Recommended
Web_05_ jQuery
Web_05_ jQuery
team air @ Dimigo
2017년 javascript의 현재주소
2017년 javascript의 현재주소
윤학 권
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
종훈 박
CSS3 Top10
CSS3 Top10
Toby Yun
『풀스택 개발자를 위한 MEAN 스택 입문』 - 미리보기
『풀스택 개발자를 위한 MEAN 스택 입문』 - 미리보기
복연 이
웹 본격적으로 배우기 전 감 잡기 - 1
웹 본격적으로 배우기 전 감 잡기 - 1
mangonamu
CSS3 천기누설
CSS3 천기누설
Toby Yun
CSS Trend
CSS Trend
Wonjun Hwang
Recommended
Web_05_ jQuery
Web_05_ jQuery
team air @ Dimigo
2017년 javascript의 현재주소
2017년 javascript의 현재주소
윤학 권
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
종훈 박
CSS3 Top10
CSS3 Top10
Toby Yun
『풀스택 개발자를 위한 MEAN 스택 입문』 - 미리보기
『풀스택 개발자를 위한 MEAN 스택 입문』 - 미리보기
복연 이
웹 본격적으로 배우기 전 감 잡기 - 1
웹 본격적으로 배우기 전 감 잡기 - 1
mangonamu
CSS3 천기누설
CSS3 천기누설
Toby Yun
CSS Trend
CSS Trend
Wonjun Hwang
깃헙 페이지로 호스팅 하기 사전 자료
깃헙 페이지로 호스팅 하기 사전 자료
권성 양
Jsp convert to Servlet
Jsp convert to Servlet
JU Chae
비개발자를 위한 Javascript 알아가기 #4.1
비개발자를 위한 Javascript 알아가기 #4.1
민태 김
웹퍼블리싱강의
웹퍼블리싱강의
재은 박
20 handler and_async_task
20 handler and_async_task
운용 최
비개발자를 위한 Javascript 알아가기 #2
비개발자를 위한 Javascript 알아가기 #2
민태 김
Web assembly 맛보기
Web assembly 맛보기
GyeongSeok Seo
[부스트캠퍼세미나]김재원_presentation-oop
[부스트캠퍼세미나]김재원_presentation-oop
CONNECT FOUNDATION
[I/O Extended 2019 Incheon] What's new in the Web
[I/O Extended 2019 Incheon] What's new in the Web
HyunSeob Lee
I am ASP.NET Core Razor Pages
I am ASP.NET Core Razor Pages
SangHoon Han
ECMA Script
ECMA Script
Wonjun Hwang
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
우영 주
The LESS 기초 : The Dynamic Styleshee Language Basic
The LESS 기초 : The Dynamic Styleshee Language Basic
jeong seok yang
20201223 jquery
20201223 jquery
sonhyungsoo
프론트엔드 개발자의 자바스크립트
프론트엔드 개발자의 자바스크립트
jeong seok yang
웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트
웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트
Rhio Kim
MEAN Stack 기반 모바일 서비스 개발 overview
MEAN Stack 기반 모바일 서비스 개발 overview
민태 김
웹 기반 하이퍼포먼스 그래픽 처리 - 문경두
웹 기반 하이퍼포먼스 그래픽 처리 - 문경두
jscamp_kr
자바 웹 개발 시작하기 : 계획
자바 웹 개발 시작하기 : 계획
DK Lee
FullStack 개발자 만들기 과정 소개 (Android + MEAN Stack + Redis 다루기)
FullStack 개발자 만들기 과정 소개 (Android + MEAN Stack + Redis 다루기)
YoungSu Son
처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차
Michael Yang
처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차
Michael Yang
More Related Content
What's hot
깃헙 페이지로 호스팅 하기 사전 자료
깃헙 페이지로 호스팅 하기 사전 자료
권성 양
Jsp convert to Servlet
Jsp convert to Servlet
JU Chae
비개발자를 위한 Javascript 알아가기 #4.1
비개발자를 위한 Javascript 알아가기 #4.1
민태 김
웹퍼블리싱강의
웹퍼블리싱강의
재은 박
20 handler and_async_task
20 handler and_async_task
운용 최
비개발자를 위한 Javascript 알아가기 #2
비개발자를 위한 Javascript 알아가기 #2
민태 김
Web assembly 맛보기
Web assembly 맛보기
GyeongSeok Seo
[부스트캠퍼세미나]김재원_presentation-oop
[부스트캠퍼세미나]김재원_presentation-oop
CONNECT FOUNDATION
[I/O Extended 2019 Incheon] What's new in the Web
[I/O Extended 2019 Incheon] What's new in the Web
HyunSeob Lee
I am ASP.NET Core Razor Pages
I am ASP.NET Core Razor Pages
SangHoon Han
ECMA Script
ECMA Script
Wonjun Hwang
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
우영 주
The LESS 기초 : The Dynamic Styleshee Language Basic
The LESS 기초 : The Dynamic Styleshee Language Basic
jeong seok yang
20201223 jquery
20201223 jquery
sonhyungsoo
프론트엔드 개발자의 자바스크립트
프론트엔드 개발자의 자바스크립트
jeong seok yang
웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트
웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트
Rhio Kim
MEAN Stack 기반 모바일 서비스 개발 overview
MEAN Stack 기반 모바일 서비스 개발 overview
민태 김
웹 기반 하이퍼포먼스 그래픽 처리 - 문경두
웹 기반 하이퍼포먼스 그래픽 처리 - 문경두
jscamp_kr
자바 웹 개발 시작하기 : 계획
자바 웹 개발 시작하기 : 계획
DK Lee
FullStack 개발자 만들기 과정 소개 (Android + MEAN Stack + Redis 다루기)
FullStack 개발자 만들기 과정 소개 (Android + MEAN Stack + Redis 다루기)
YoungSu Son
What's hot
(20)
깃헙 페이지로 호스팅 하기 사전 자료
깃헙 페이지로 호스팅 하기 사전 자료
Jsp convert to Servlet
Jsp convert to Servlet
비개발자를 위한 Javascript 알아가기 #4.1
비개발자를 위한 Javascript 알아가기 #4.1
웹퍼블리싱강의
웹퍼블리싱강의
20 handler and_async_task
20 handler and_async_task
비개발자를 위한 Javascript 알아가기 #2
비개발자를 위한 Javascript 알아가기 #2
Web assembly 맛보기
Web assembly 맛보기
[부스트캠퍼세미나]김재원_presentation-oop
[부스트캠퍼세미나]김재원_presentation-oop
[I/O Extended 2019 Incheon] What's new in the Web
[I/O Extended 2019 Incheon] What's new in the Web
I am ASP.NET Core Razor Pages
I am ASP.NET Core Razor Pages
ECMA Script
ECMA Script
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
The LESS 기초 : The Dynamic Styleshee Language Basic
The LESS 기초 : The Dynamic Styleshee Language Basic
20201223 jquery
20201223 jquery
프론트엔드 개발자의 자바스크립트
프론트엔드 개발자의 자바스크립트
웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트
웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트
MEAN Stack 기반 모바일 서비스 개발 overview
MEAN Stack 기반 모바일 서비스 개발 overview
웹 기반 하이퍼포먼스 그래픽 처리 - 문경두
웹 기반 하이퍼포먼스 그래픽 처리 - 문경두
자바 웹 개발 시작하기 : 계획
자바 웹 개발 시작하기 : 계획
FullStack 개발자 만들기 과정 소개 (Android + MEAN Stack + Redis 다루기)
FullStack 개발자 만들기 과정 소개 (Android + MEAN Stack + Redis 다루기)
Similar to 03 jsx
처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차
Michael Yang
처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차
Michael Yang
Webpack&babel
Webpack&babel
ChangHyeon Bae
Web_03_Front-end Advance
Web_03_Front-end Advance
team air @ Dimigo
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차
Michael Yang
Isomorphicspring Isomorphic - spring web seminar 2015
Isomorphicspring Isomorphic - spring web seminar 2015
sung yong jung
막하는 스터디 네 번째 만남 AngularJs (20151108)
막하는 스터디 네 번째 만남 AngularJs (20151108)
연웅 조
WebAssembly 101
WebAssembly 101
HyunSeob Lee
Compass
Compass
Judy Park
Express framework tutorial
Express framework tutorial
우림 류
Asp.net Razor
Asp.net Razor
Sang Yun Kim
Spring Boot + React + Gradle in VSCode
Spring Boot + React + Gradle in VSCode
dpTablo
[D2 campus]착 하면 척! chak 서비스 개발기
[D2 campus]착 하면 척! chak 서비스 개발기
NAVER D2
JQuery를 이용하여 웹 위젯 작성하기_(주)시스포유아이앤씨
JQuery를 이용하여 웹 위젯 작성하기_(주)시스포유아이앤씨
sys4u
9.component style
9.component style
Daniel Lim
다이내믹 스타일시트 언어 Less framework 활용 by yamoo9
다이내믹 스타일시트 언어 Less framework 활용 by yamoo9
yamoo9
엘리먼트는 좌우의 날개로 난다
엘리먼트는 좌우의 날개로 난다
정석 양
JSP 프로그래밍 #02 서블릿과 JSP 시작하기
JSP 프로그래밍 #02 서블릿과 JSP 시작하기
Myungjin Lee
Javascript everywhere - Node.js | Devon 2012
Javascript everywhere - Node.js | Devon 2012
Daum DNA
ReactJS로 시작하는 멀티플랫폼 개발하기
ReactJS로 시작하는 멀티플랫폼 개발하기
Taegon Kim
Similar to 03 jsx
(20)
처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차
Webpack&babel
Webpack&babel
Web_03_Front-end Advance
Web_03_Front-end Advance
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차
Isomorphicspring Isomorphic - spring web seminar 2015
Isomorphicspring Isomorphic - spring web seminar 2015
막하는 스터디 네 번째 만남 AngularJs (20151108)
막하는 스터디 네 번째 만남 AngularJs (20151108)
WebAssembly 101
WebAssembly 101
Compass
Compass
Express framework tutorial
Express framework tutorial
Asp.net Razor
Asp.net Razor
Spring Boot + React + Gradle in VSCode
Spring Boot + React + Gradle in VSCode
[D2 campus]착 하면 척! chak 서비스 개발기
[D2 campus]착 하면 척! chak 서비스 개발기
JQuery를 이용하여 웹 위젯 작성하기_(주)시스포유아이앤씨
JQuery를 이용하여 웹 위젯 작성하기_(주)시스포유아이앤씨
9.component style
9.component style
다이내믹 스타일시트 언어 Less framework 활용 by yamoo9
다이내믹 스타일시트 언어 Less framework 활용 by yamoo9
엘리먼트는 좌우의 날개로 난다
엘리먼트는 좌우의 날개로 난다
JSP 프로그래밍 #02 서블릿과 JSP 시작하기
JSP 프로그래밍 #02 서블릿과 JSP 시작하기
Javascript everywhere - Node.js | Devon 2012
Javascript everywhere - Node.js | Devon 2012
ReactJS로 시작하는 멀티플랫폼 개발하기
ReactJS로 시작하는 멀티플랫폼 개발하기
More from Jay Lee
Https
Https
Jay Lee
04 component
04 component
Jay Lee
02 install-react-js
02 install-react-js
Jay Lee
01 introduce-react-js
01 introduce-react-js
Jay Lee
Codeveloper 개발기
Codeveloper 개발기
Jay Lee
Codeveloper
Codeveloper
Jay Lee
More from Jay Lee
(6)
Https
Https
04 component
04 component
02 install-react-js
02 install-react-js
01 introduce-react-js
01 introduce-react-js
Codeveloper 개발기
Codeveloper 개발기
Codeveloper
Codeveloper
03 jsx
1.
JSX JSX 이재민 2018년 9월
2.
3.
== // ES6 문법 //
과거 자바스크립트 문법
4.
모듈화 된 파일을
import 하여 사용!
5.
모듈화 된 파일을
import 하여 사용! But, Browser에서는 파일을 import 할 수가 없다!
6.
모듈화 된 파일을
import 하여 사용! But, Browser에서는 파일을 import 할 수가 없다! 모듈화된 파일을 하나의 파일로 번들링할 필요가 생김
7.
8.
SVG나 CSS 파일
역시 import가 가능하다!
9.
SVG나 CSS 파일
역시 import가 가능하다! (로더를 사용한다면)
10.
SVG나 CSS 파일
역시 import가 가능하다! (로더를 사용한다면) css-loader. : CSS 파일을 로드 file-loader. : 웹폰트나 미디어 파일을 로드 babel-loader : ES6 문법으로 작성된 코드를 ES5 문법으로 변환
11.
create-react-app을 사용하면 별도의
로더 설정이 필요없다! 궁금하면 node_modules/react-scripts
12.
리엑트 라이브러리 내부에
있는 Component 클래스를 상속 한다
13.
컴포넌트를 화면에 어떻게
보이게 할지를 렌더링
14.
HTML ? Template?
15.
JSX! “ ”
16.
17.
JSX의 장점 HTML 코드와
유사해 보기 쉽고 익숙하다! 바벨이 코드를 변환하는 중에 오류가 있다면 감지해 낸다! React 컴포넌트도 JSX안에 작성 가능하다!
18.
JSX 문법
19.
감싸인 요소 컴포넌트에 여러
요소가 있다면 반드시 부모요소 하나로 감싸야 한다!
20.
감싸인 요소 컴포넌트에 여러
요소가 있다면 반드시 부모요소 하나로 감싸야 한다! 오류 발생 —>
21.
감싸인 요소 컴포넌트에 여러
요소가 있다면 반드시 부모요소 하나로 감싸야 한다!
22.
렌더링시 트리 형태의
Virtual DOM을 만들기를 돕기 위해 부모 요소로 감싸는 것!
23.
자바스크립트 표현
24.
자바스크립트 표현 { }로
감싸서 자바스크립트 표현식을 쓸 수 있다!
25.
if 문 대신
조건부 연산자
26.
if 문 대신
조건부 연산자
27.
if 문 대신
조건부 연산자 JSX 표현식안에서는 if 문을 사용할 수 없어 삼항 연산자를 사용한다.
28.
&&를 사용한 조건부
렌더링 null, false는 렌더링하지 않아 다음과 같이 작성할 수 있다! ==
29.
인라인 스타일링 CSS 스타일은
자바스크립트 객체 형식으로 만들어 적용해야한다.
30.
css의 key는 camelCase를
사용한다.
31.
css의 key는 camelCase를
사용한다. key값에는 -를 사용할 수 없어 -webkit는 Webkit으로 -moz는 Moz로 작성한다
32.
css의 key는 camelCase를
사용한다. key값에는 -를 사용할 수 없어 -webkit는 Webkit으로 -moz는 Moz로 작성한다. 예외적으로 -ms 는 소문자 ms로 작성한다.
33.
class 대신 className class는
자바스크립트의 예약어로 포함됨으로 class 대신 className 을 이용한다.
34.
class 대신 className
35.
꼭 닫아야 하는
태그 HTML의 꼭 닫지 않아도 되는 태그로 JSX에서는 반드시 닫아주어야 합니다. 닫는 태그가 없으면 virtual DOM 작성시 트리 구조를 만들 수 없습니다.
36.
주석 일반적으로 { /*
이렇게*/ } 주석을 작성합니다. self-close 요소에서는 {}없이 주석을 작성할 수 있습니다.
Download now