SlideShare a Scribd company logo
1 of 40
Download to read offline
ReactAJAVASCRIPTLIBRARYFORBUILDINGUSERINTERFACES
강의 순서
1회차
개발 환경 구성 – SublimeText3, Node.js 설치 (필요시)
HTML, JS 기초
React 소개
Node.js 간단한 실습
2회차
React 튜토리얼
React 예제 작성
HeXA - 기초부2 ReactJS Tutorial
HTML
HyperText Markup Language
웹에서의 구조적 문서 작성을 위한 방법 제공
HeXA - 기초부2 ReactJS Tutorial
JAVASCRIPT
웹브라우저내에서 사용되는 객체지향 스크립트 언어
Node.js 등의 런타임 환경을 이용해 브라우저 밖에서도 사용 가능
JAVA랑 1도 상관없음!!
우리의 목적은 뭐다? React!
React를 하기 위한 기본중의 기본만 속성으로 빠르게!
제대로 배우고 싶으면 HeXA 들어오세요! http://www.hexa.pro
일단 코딩부터 해봅시다
HeXA - 기초부2 ReactJS Tutorial
에디터 설치 - SublimeText3
https://www.sublimetext.com/3
Portable version을 다운받는다.
압축을 푼다.
실행한다.
코딩한다.
HeXA - 기초부2 ReactJS Tutorial
코드를 받아오자
• GIT이 있건 없건!!
https://github.com/kimxogus/React-web-tutorial 들어갑니다.
Star를 누릅니다. (프리미엄 A/S 서비스)
Fork를 누릅니다. (다운로드가 빨라집니다. 똑같은 것 같다면 기분탓)
Download ZIP을 클릭하여 zip파일을 다운
압축 풀기!
HeXA - 기초부2 ReactJS Tutorial
일단 써보자 HTML
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>
HeXA - 기초부2 ReactJS Tutorial
1_html.html
일단 써보자 HTML
<body>
<header>
<nav></nav>
</header>
<div id=“main”></div>
</body>
HeXA - 기초부2 ReactJS Tutorial
HEADER
NAV
MAIN
1_html.html
일단 써보자 HTML
<body>
<header>
<nav></nav>
</header>
<div id=“main”>
<div id=“content1” class=“content”></div>
<div id=“content2” class=“content”></div>
</div>
</body>
HeXA - 기초부2 ReactJS Tutorial
HEADER
NAV
MAIN
CONTENT1
CONTENT2
1_html.html
일단 써보자 HTML
<body>
<header>
<nav></nav>
</header>
<div id=“main”>
<div id=“content1” class=“content”>
<div class=“title”></div>
<div class=“description”></div>
</div>
<div id=“content2” class=“content”></div>
</div>
</body>
HeXA - 기초부2 ReactJS Tutorial
HEADER
NAV
MAIN
CONTENT1
CONTENT2
TITLE DESCRIPTION
1_html.html
일단 써보자 HTML
<body>
<header>
<nav></nav>
</header>
<div id=“main”>
<div id=“content1” class=“content”>
<div class=“title”></div>
<div class=“description”></div>
</div>
<div id=“content2” class=“content”></div>
</div>
<footer></footer>
</body>
HeXA - 기초부2 ReactJS Tutorial
HEADER
NAV
MAIN
CONTENT1
CONTENT2
TITLE DESCRIPTION
FOOTER
1_html.html
일단 써보자 JAVASCRIPT
<footer></footer>
<script>
// 여기에 JS 코드를 삽입해볼겁니다!
</script>
</body>
HeXA - 기초부2 ReactJS Tutorial
HEADER
NAV
MAIN
CONTENT1
CONTENT2
TITLE DESCRIPTION
FOOTER
1_javascript.html
일단 써보자 JAVASCRIPT
<script>
var content2_html = document.getElementById("content2").innerHTML;
document.getElementById("content2").innerHTML = content2_html
+ "<br><div class='title'>TITLE</div>";
var nav = document.getElementsByTagName("nav");
console.log(nav);
</script>
HeXA - 기초부2 ReactJS Tutorial
HEADER
NAV
MAIN
CONTENT1
TITLE DESCRIPTION
FOOTER
CONTENT2
TITLE
1_javascript.html
일단 써보자 JAVASCRIPT
<script>
var content2_html = document.getElementById("content2").innerHTML;
document.getElementById("content2").innerHTML = content2_html
+ "<br><div class='title'>TITLE</div>";
var nav = document.getElementsByTagName("nav")[0];
console.log(nav);
</script>
HeXA - 기초부2 ReactJS Tutorial
HEADER
NAV
MAIN
CONTENT1
TITLE DESCRIPTION
FOOTER
CONTENT2
TITLE
1_javascript.html
일단 써보자 JAVASCRIPT
<script>
var content2_html = document.getElementById("content2").innerHTML;
document.getElementById("content2").innerHTML = content2_html
+ "<br><div class='title'>TITLE</div>";
var nav = document.getElementsByTagName("nav")[0];
console.log(nav);
nav.onclick = function() {
alert("You’ve just clicked nav!");
}
</script>
HeXA - 기초부2 ReactJS Tutorial
HEADER
NAV
MAIN
CONTENT1
TITLE DESCRIPTION
FOOTER
CONTENT2
TITLE
1_javascript.html
HTML & JS 끝!
React에 들어가기 앞서…
HeXA - 기초부2 ReactJS Tutorial
WEB의 기본 MVC 패턴
Model View Controller
애플리케이션을
세가지의 역할로 구분한
개발 방법론
HeXA - 기초부2 ReactJS Tutorial
출처: 생활코딩
MVC 패턴
예시) 쇼핑몰에서 장바구니에 상품 넣기
HeXA - 기초부2 ReactJS Tutorial
VIEW
CONTROLLER
MODEL
MVC 패턴
예시) 쇼핑몰에서 장바구니에 상품 넣기
1. 화면(View)에서 상품을 선택하고
장바구니에 넣기 버튼 클릭!
HeXA - 기초부2 ReactJS Tutorial
VIEW
CONTROLLER
MODEL
MVC 패턴
예시) 쇼핑몰에서 장바구니에 상품 넣기
1. 화면(View)에서 상품을 선택하고
장바구니에 넣기 버튼 클릭!
2. Controller는 상품 정보를 Model에 반영
(장바구니에 상품 정보 추가)
HeXA - 기초부2 ReactJS Tutorial
VIEW
CONTROLLER
MODEL
MVC 패턴
예시) 쇼핑몰에서 장바구니에 상품 넣기
1. 화면(View)에서 상품을 선택하고
장바구니에 넣기 버튼 클릭!
2. Controller는 상품 정보를 Model에 반영
(장바구니에 상품 정보 추가)
3. Controller는 변경된 Model의 정보를
View에 반영한다.
HeXA - 기초부2 ReactJS Tutorial
VIEW
CONTROLLER
MODEL
React는
A JAVASCRIPT LIBRARY FOR
BUILDING USER INTERFACES
HeXA - 기초부2 ReactJS Tutorial
VIEW
CONTROLLER
MODEL
React는
A JAVASCRIPT LIBRARY FOR
BUILDING USER INTERFACES
View에만 초점을 맞췄다
MC를 원한다면
Flux, Redux같은 라이브러리,
혹은 Angular같은 MVC프레임워크와
함께 쓸 수 있다.
HeXA - 기초부2 ReactJS Tutorial
VIEW
CONTROLLER
MODEL
React는
A JAVASCRIPT LIBRARY FOR
BUILDING USER INTERFACES
View에만 초점을 맞췄다
MC를 원한다면
Flux, Redux같은 라이브러리,
혹은 Angular같은 MVC프레임워크와
함께 쓸 수 있다.
HeXA - 기초부2 ReactJS Tutorial
UI 짜기 좋다
React로 짜면
const Header = React.createClass({
render: function() {
return (
<header>
<nav></nav>
</header>
);
}
});
const Footer = React.createClass({
render: function() {
return (
<footer></footer>
);
}
});
const Content = React.createClass({
render: function() {
return (
<div id={this.props.content.id}
className=“content”>
<div className=“title”></div>
<div className=“description”></div>
</div>
);
}
});
const Main = React.createClass({
render: function() {
var contents = [
{id:“content1”}, {id:”content2”}
];
return (
<div id=“main”>
{contents.map(e=>
<Content key={e.id} content={e}/>
)}
</div>
);
}
});
const HTML = React.createClass({
render: function() {
return (
<div>
<Header/>
<Main/>
<Footer/>
</div>
);
}
});
ReactDOM.render(
<HTML/>,
document.getElementsByTagName(“body”)[0]
);
HeXA - 기초부2 ReactJS Tutorial
코드는 길어졌으나
훨씬 알아보기 쉽다!
React로 짜면
const Header = require(‘./Main’);
const Main = require(‘./Main’);
const Footer = require(‘./Footer’);
const HTML = React.createClass({
render: function() {
return (
<div>
<Header/>
<Main/>
<Footer/>
</div>
);
}
});
ReactDOM.render(
<HTML>,
document.getElementsByTagName(“body”)[0]
);
HeXA - 기초부2 ReactJS Tutorial
컴포넌트 별로 따로 관리
> 재사용 가능
HeXA - 기초부2 ReactJS Tutorial
HeXA - 기초부2 ReactJS Tutorial
React의 특징
JSX
Virtual DOM
단방향 데이터 흐름
HeXA - 기초부2 ReactJS Tutorial
JSX
JS 코드에 XML을 직접 표현
const Content = React.createClass({
render: function() {
return (
<div id={this.props.content.id}
className=“content”>
<div className=“title”></div>
<div className=“description”></div>
</div>
);
}
});
HeXA - 기초부2 ReactJS Tutorial
JSX
JS 코드에 XML을 직접 표현 > 표준 문법으로 컴파일(변환)
var Content = React.createClass({
displayName: “Content”,
render: function() {
return (
React.createElement(‘div’, {id:this.props.content.id, className:“content”},
React.createElement(‘div’, {className:“title”}),
React.createElemtn(‘div’, {className:“description”})
)
);
}
});
HeXA - 기초부2 ReactJS Tutorial
JSX
JSX문법이 아닌 일반 JS 문법을 사용할 수도 있으나
변X난 더러운 코드가 좋아! (...)가 아니라면 JSX 쓰는게 바람직하다.
HeXA - 기초부2 ReactJS Tutorial
Virtual DOM
빠르고 좋다!
HeXA - 기초부2 ReactJS Tutorial
출처: goo.gl/4dKdPz
단방향 데이터 흐름
Property를 이용한 상위 요소 > 하위 요소의 데이터 흐름
<div id={this.props.content.id} className=“content”>
이벤트를 통해 하위 컴포넌트의 변화를 감지할 수 있다.
: 상위 컴포넌트가 하위 컴포넌트에 이벤트를 추가하여 감지
양방향 데이터 바인딩을 원한다면
다른 라이브러리, 프레임워크를 붙여 쓸 수도 있다.
HeXA - 기초부2 ReactJS Tutorial
JSX
JS 코드에 XML을 직접 표현 > 표준 문법으로 컴파일(변환)
var Content = React.createClass({
displayName: “Content”,
render: function() {
return (
React.createElement(‘div’, {id:this.props.content.id, className:“content”},
React.createElement(‘div’, {className:“title”}),
React.createElemtn(‘div’, {className:“description”})
)
);
}
});
HeXA - 기초부2 ReactJS Tutorial
Node.js로!
Node.js 설치
https://nodejs.org/en/
다운받는다.
설치한다.
Win + R 하고 cmd 입력 후 엔터
node–v 입력 후 엔터
Node.js 버전이 나온다면 성공!
HeXA - 기초부2 ReactJS Tutorial
일단 써보자 JS with Node.js
app.js
console.log(“Hello HeXA!”);
콘솔
Hello HeXA!
HeXA - 기초부2 ReactJS Tutorial
일단 써보자 JS with Node.js
app.js
var http = require('http');
var port = 8080;
http.createServer(function(req,res) {
res.end("Hello HeXA!");
}).listen(port);
브라우저 http://localhost:8080/
Hello HeXA!
HeXA - 기초부2 ReactJS Tutorial
다음 시간엔…
Node.js를 활용한 다양한 JSX 컴파일 방법
React의 데이터 바인딩(props, state)
예제를 활용한 React 실습
HeXA - 기초부2 ReactJS Tutorial
수고하셨습니다
김태현
kgyoo8232@gmail.com
HeXA - 기초부2 ReactJS Tutorial

More Related Content

What's hot

[115] clean fe development_윤지수
[115] clean fe development_윤지수[115] clean fe development_윤지수
[115] clean fe development_윤지수NAVER D2
 
ReactJS | 서버와 클라이어트에서 동시에 사용하는
ReactJS | 서버와 클라이어트에서 동시에 사용하는ReactJS | 서버와 클라이어트에서 동시에 사용하는
ReactJS | 서버와 클라이어트에서 동시에 사용하는Taegon Kim
 
Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Kim Hunmin
 
다함께, FluxUtils 한바퀴!
다함께, FluxUtils 한바퀴!다함께, FluxUtils 한바퀴!
다함께, FluxUtils 한바퀴!우영 주
 
React 애플리케이션 아키텍처 - 아무도 알려주지 않아서 혼자서 삽질했다.
React 애플리케이션 아키텍처 - 아무도 알려주지 않아서 혼자서 삽질했다.React 애플리케이션 아키텍처 - 아무도 알려주지 않아서 혼자서 삽질했다.
React 애플리케이션 아키텍처 - 아무도 알려주지 않아서 혼자서 삽질했다.병대 손
 
React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기WebFrameworks
 
Nodejs, PhantomJS, casperJs, YSlow, expressjs
Nodejs, PhantomJS, casperJs, YSlow, expressjsNodejs, PhantomJS, casperJs, YSlow, expressjs
Nodejs, PhantomJS, casperJs, YSlow, expressjs기동 이
 
Isomorphicspring Isomorphic - spring web seminar 2015
Isomorphicspring Isomorphic - spring web seminar 2015Isomorphicspring Isomorphic - spring web seminar 2015
Isomorphicspring Isomorphic - spring web seminar 2015sung yong jung
 
진짜기초 Node.js
진짜기초 Node.js진짜기초 Node.js
진짜기초 Node.jsWoo Jin Kim
 
Meteor 0.3.6 Preview
Meteor 0.3.6 PreviewMeteor 0.3.6 Preview
Meteor 0.3.6 PreviewJuntai Park
 
Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나JeongHun Byeon
 
Javascript everywhere - Node.js | Devon 2012
Javascript everywhere - Node.js | Devon 2012Javascript everywhere - Node.js | Devon 2012
Javascript everywhere - Node.js | Devon 2012Daum DNA
 
ECMAScript 6의 새로운 것들!
ECMAScript 6의 새로운 것들!ECMAScript 6의 새로운 것들!
ECMAScript 6의 새로운 것들!WooYoung Cho
 
Clean Front-End Development
Clean Front-End DevelopmentClean Front-End Development
Clean Front-End Development지수 윤
 

What's hot (18)

[115] clean fe development_윤지수
[115] clean fe development_윤지수[115] clean fe development_윤지수
[115] clean fe development_윤지수
 
ReactJS | 서버와 클라이어트에서 동시에 사용하는
ReactJS | 서버와 클라이어트에서 동시에 사용하는ReactJS | 서버와 클라이어트에서 동시에 사용하는
ReactJS | 서버와 클라이어트에서 동시에 사용하는
 
Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까?
 
다함께, FluxUtils 한바퀴!
다함께, FluxUtils 한바퀴!다함께, FluxUtils 한바퀴!
다함께, FluxUtils 한바퀴!
 
역시 Redux
역시 Redux역시 Redux
역시 Redux
 
React 애플리케이션 아키텍처 - 아무도 알려주지 않아서 혼자서 삽질했다.
React 애플리케이션 아키텍처 - 아무도 알려주지 않아서 혼자서 삽질했다.React 애플리케이션 아키텍처 - 아무도 알려주지 않아서 혼자서 삽질했다.
React 애플리케이션 아키텍처 - 아무도 알려주지 않아서 혼자서 삽질했다.
 
React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기
 
Spring Boot 2
Spring Boot 2Spring Boot 2
Spring Boot 2
 
Spring Boot 1
Spring Boot 1Spring Boot 1
Spring Boot 1
 
Nodejs, PhantomJS, casperJs, YSlow, expressjs
Nodejs, PhantomJS, casperJs, YSlow, expressjsNodejs, PhantomJS, casperJs, YSlow, expressjs
Nodejs, PhantomJS, casperJs, YSlow, expressjs
 
Isomorphicspring Isomorphic - spring web seminar 2015
Isomorphicspring Isomorphic - spring web seminar 2015Isomorphicspring Isomorphic - spring web seminar 2015
Isomorphicspring Isomorphic - spring web seminar 2015
 
진짜기초 Node.js
진짜기초 Node.js진짜기초 Node.js
진짜기초 Node.js
 
Meteor 0.3.6 Preview
Meteor 0.3.6 PreviewMeteor 0.3.6 Preview
Meteor 0.3.6 Preview
 
Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나
 
Javascript everywhere - Node.js | Devon 2012
Javascript everywhere - Node.js | Devon 2012Javascript everywhere - Node.js | Devon 2012
Javascript everywhere - Node.js | Devon 2012
 
ECMAScript 6의 새로운 것들!
ECMAScript 6의 새로운 것들!ECMAScript 6의 새로운 것들!
ECMAScript 6의 새로운 것들!
 
Clean Front-End Development
Clean Front-End DevelopmentClean Front-End Development
Clean Front-End Development
 
Node.js 기본
Node.js 기본Node.js 기본
Node.js 기본
 

Viewers also liked

Jenkins를 활용한 javascript 개발
Jenkins를 활용한 javascript 개발Jenkins를 활용한 javascript 개발
Jenkins를 활용한 javascript 개발지수 윤
 
Deview 2015 review
Deview 2015 reviewDeview 2015 review
Deview 2015 review석규 오
 
이제 온라인이다! 브라우저 안으로 들어온 Visual studio!
이제 온라인이다! 브라우저 안으로 들어온 Visual studio!이제 온라인이다! 브라우저 안으로 들어온 Visual studio!
이제 온라인이다! 브라우저 안으로 들어온 Visual studio!SangHoon Han
 
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
 
JavaScript defer & async
JavaScript defer & asyncJavaScript defer & async
JavaScript defer & asyncSeung-Hyun PAEK
 
프론트엔드 개발자
프론트엔드 개발자프론트엔드 개발자
프론트엔드 개발자jung kyunghwan
 
최호영, TYPESCRIPT - Javascript의 안정성을 높이기 위한 시도, NDC2013
최호영, TYPESCRIPT - Javascript의 안정성을 높이기 위한 시도, NDC2013최호영, TYPESCRIPT - Javascript의 안정성을 높이기 위한 시도, NDC2013
최호영, TYPESCRIPT - Javascript의 안정성을 높이기 위한 시도, NDC2013devCAT Studio, NEXON
 
Es2015 Simple Overview
Es2015 Simple OverviewEs2015 Simple Overview
Es2015 Simple OverviewKim Hunmin
 
비개발자를 위한 Javascript 알아가기 #4
비개발자를 위한 Javascript 알아가기 #4비개발자를 위한 Javascript 알아가기 #4
비개발자를 위한 Javascript 알아가기 #4민태 김
 
FalsyValues. Dmitry Soshnikov - ECMAScript 6
FalsyValues. Dmitry Soshnikov - ECMAScript 6FalsyValues. Dmitry Soshnikov - ECMAScript 6
FalsyValues. Dmitry Soshnikov - ECMAScript 6Dmitry Soshnikov
 
혁신적인 웹컴포넌트 라이브러리 - Polymer
혁신적인 웹컴포넌트 라이브러리 - Polymer혁신적인 웹컴포넌트 라이브러리 - Polymer
혁신적인 웹컴포넌트 라이브러리 - PolymerJae Sung Park
 

Viewers also liked (11)

Jenkins를 활용한 javascript 개발
Jenkins를 활용한 javascript 개발Jenkins를 활용한 javascript 개발
Jenkins를 활용한 javascript 개발
 
Deview 2015 review
Deview 2015 reviewDeview 2015 review
Deview 2015 review
 
이제 온라인이다! 브라우저 안으로 들어온 Visual studio!
이제 온라인이다! 브라우저 안으로 들어온 Visual studio!이제 온라인이다! 브라우저 안으로 들어온 Visual studio!
이제 온라인이다! 브라우저 안으로 들어온 Visual studio!
 
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
 
JavaScript defer & async
JavaScript defer & asyncJavaScript defer & async
JavaScript defer & async
 
프론트엔드 개발자
프론트엔드 개발자프론트엔드 개발자
프론트엔드 개발자
 
최호영, TYPESCRIPT - Javascript의 안정성을 높이기 위한 시도, NDC2013
최호영, TYPESCRIPT - Javascript의 안정성을 높이기 위한 시도, NDC2013최호영, TYPESCRIPT - Javascript의 안정성을 높이기 위한 시도, NDC2013
최호영, TYPESCRIPT - Javascript의 안정성을 높이기 위한 시도, NDC2013
 
Es2015 Simple Overview
Es2015 Simple OverviewEs2015 Simple Overview
Es2015 Simple Overview
 
비개발자를 위한 Javascript 알아가기 #4
비개발자를 위한 Javascript 알아가기 #4비개발자를 위한 Javascript 알아가기 #4
비개발자를 위한 Javascript 알아가기 #4
 
FalsyValues. Dmitry Soshnikov - ECMAScript 6
FalsyValues. Dmitry Soshnikov - ECMAScript 6FalsyValues. Dmitry Soshnikov - ECMAScript 6
FalsyValues. Dmitry Soshnikov - ECMAScript 6
 
혁신적인 웹컴포넌트 라이브러리 - Polymer
혁신적인 웹컴포넌트 라이브러리 - Polymer혁신적인 웹컴포넌트 라이브러리 - Polymer
혁신적인 웹컴포넌트 라이브러리 - Polymer
 

Similar to React 튜토리얼 1차시

[TECHCON 2019: MOBILE - Android]2.예제에서는 알려주지 않는 Model 이야기
[TECHCON 2019: MOBILE - Android]2.예제에서는 알려주지 않는 Model 이야기[TECHCON 2019: MOBILE - Android]2.예제에서는 알려주지 않는 Model 이야기
[TECHCON 2019: MOBILE - Android]2.예제에서는 알려주지 않는 Model 이야기NAVER Engineering
 
3.component 101
3.component 1013.component 101
3.component 101Daniel Lim
 
Spring Boot + React + Gradle in VSCode
Spring Boot + React + Gradle in VSCodeSpring Boot + React + Gradle in VSCode
Spring Boot + React + Gradle in VSCodedpTablo
 
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)SangIn Choung
 
Django를 Django답게, Django로 뉴스 사이트 만들기
Django를 Django답게, Django로 뉴스 사이트 만들기Django를 Django답게, Django로 뉴스 사이트 만들기
Django를 Django답게, Django로 뉴스 사이트 만들기Kyoung Up Jung
 
HOONS닷넷 오픈소스 프로젝트 Part1.
HOONS닷넷 오픈소스 프로젝트 Part1.HOONS닷넷 오픈소스 프로젝트 Part1.
HOONS닷넷 오픈소스 프로젝트 Part1.Hojin Jun
 
#22.스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)_스프링프레임워크 강좌, 재직자환급교육,실업자국비지원...
#22.스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)_스프링프레임워크 강좌, 재직자환급교육,실업자국비지원...#22.스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)_스프링프레임워크 강좌, 재직자환급교육,실업자국비지원...
#22.스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)_스프링프레임워크 강좌, 재직자환급교육,실업자국비지원...탑크리에듀(구로디지털단지역3번출구 2분거리)
 
파이썬 웹 프로그래밍 2탄
파이썬 웹 프로그래밍 2탄 파이썬 웹 프로그래밍 2탄
파이썬 웹 프로그래밍 2탄 SeongHyun Ahn
 
최근 Javascript framework 조사
최근 Javascript framework 조사최근 Javascript framework 조사
최근 Javascript framework 조사Kichul Jung
 
Spring MVC
Spring MVCSpring MVC
Spring MVCymtech
 
웹표준 프레임워크 메타웍스3의 적용 사례와 생산성
웹표준 프레임워크   메타웍스3의 적용 사례와 생산성웹표준 프레임워크   메타웍스3의 적용 사례와 생산성
웹표준 프레임워크 메타웍스3의 적용 사례와 생산성영재 김
 
React, Redux 실전 적용기
React, Redux 실전 적용기React, Redux 실전 적용기
React, Redux 실전 적용기은미 김
 
자바 서블릿과 세션 (Java Servlet, Session)
자바 서블릿과 세션 (Java Servlet, Session)자바 서블릿과 세션 (Java Servlet, Session)
자바 서블릿과 세션 (Java Servlet, Session)Yu Yongwoo
 
[Hello world 오픈세미나]open api client개발
[Hello world 오픈세미나]open api client개발[Hello world 오픈세미나]open api client개발
[Hello world 오픈세미나]open api client개발NAVER D2
 

Similar to React 튜토리얼 1차시 (20)

(리액트기초강좌)Reactjs helloworld_리액트공부열심히하세요~
(리액트기초강좌)Reactjs helloworld_리액트공부열심히하세요~(리액트기초강좌)Reactjs helloworld_리액트공부열심히하세요~
(리액트기초강좌)Reactjs helloworld_리액트공부열심히하세요~
 
REACTJS HelloWorld
REACTJS HelloWorldREACTJS HelloWorld
REACTJS HelloWorld
 
[TECHCON 2019: MOBILE - Android]2.예제에서는 알려주지 않는 Model 이야기
[TECHCON 2019: MOBILE - Android]2.예제에서는 알려주지 않는 Model 이야기[TECHCON 2019: MOBILE - Android]2.예제에서는 알려주지 않는 Model 이야기
[TECHCON 2019: MOBILE - Android]2.예제에서는 알려주지 않는 Model 이야기
 
3.component 101
3.component 1013.component 101
3.component 101
 
Spring Boot + React + Gradle in VSCode
Spring Boot + React + Gradle in VSCodeSpring Boot + React + Gradle in VSCode
Spring Boot + React + Gradle in VSCode
 
4-3. jquery
4-3. jquery4-3. jquery
4-3. jquery
 
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)
 
Django를 Django답게, Django로 뉴스 사이트 만들기
Django를 Django답게, Django로 뉴스 사이트 만들기Django를 Django답게, Django로 뉴스 사이트 만들기
Django를 Django답게, Django로 뉴스 사이트 만들기
 
HOONS닷넷 오픈소스 프로젝트 Part1.
HOONS닷넷 오픈소스 프로젝트 Part1.HOONS닷넷 오픈소스 프로젝트 Part1.
HOONS닷넷 오픈소스 프로젝트 Part1.
 
[Codelab 2017] ReactJS 기초
[Codelab 2017] ReactJS 기초[Codelab 2017] ReactJS 기초
[Codelab 2017] ReactJS 기초
 
react-ko.pdf
react-ko.pdfreact-ko.pdf
react-ko.pdf
 
#22.스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)_스프링프레임워크 강좌, 재직자환급교육,실업자국비지원...
#22.스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)_스프링프레임워크 강좌, 재직자환급교육,실업자국비지원...#22.스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)_스프링프레임워크 강좌, 재직자환급교육,실업자국비지원...
#22.스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)_스프링프레임워크 강좌, 재직자환급교육,실업자국비지원...
 
파이썬 웹 프로그래밍 2탄
파이썬 웹 프로그래밍 2탄 파이썬 웹 프로그래밍 2탄
파이썬 웹 프로그래밍 2탄
 
최근 Javascript framework 조사
최근 Javascript framework 조사최근 Javascript framework 조사
최근 Javascript framework 조사
 
Spring MVC
Spring MVCSpring MVC
Spring MVC
 
웹표준 프레임워크 메타웍스3의 적용 사례와 생산성
웹표준 프레임워크   메타웍스3의 적용 사례와 생산성웹표준 프레임워크   메타웍스3의 적용 사례와 생산성
웹표준 프레임워크 메타웍스3의 적용 사례와 생산성
 
React, Redux 실전 적용기
React, Redux 실전 적용기React, Redux 실전 적용기
React, Redux 실전 적용기
 
자바 서블릿과 세션 (Java Servlet, Session)
자바 서블릿과 세션 (Java Servlet, Session)자바 서블릿과 세션 (Java Servlet, Session)
자바 서블릿과 세션 (Java Servlet, Session)
 
1.react 101
1.react 1011.react 101
1.react 101
 
[Hello world 오픈세미나]open api client개발
[Hello world 오픈세미나]open api client개발[Hello world 오픈세미나]open api client개발
[Hello world 오픈세미나]open api client개발
 

React 튜토리얼 1차시

  • 2. 강의 순서 1회차 개발 환경 구성 – SublimeText3, Node.js 설치 (필요시) HTML, JS 기초 React 소개 Node.js 간단한 실습 2회차 React 튜토리얼 React 예제 작성 HeXA - 기초부2 ReactJS Tutorial
  • 3. HTML HyperText Markup Language 웹에서의 구조적 문서 작성을 위한 방법 제공 HeXA - 기초부2 ReactJS Tutorial JAVASCRIPT 웹브라우저내에서 사용되는 객체지향 스크립트 언어 Node.js 등의 런타임 환경을 이용해 브라우저 밖에서도 사용 가능 JAVA랑 1도 상관없음!!
  • 4. 우리의 목적은 뭐다? React! React를 하기 위한 기본중의 기본만 속성으로 빠르게! 제대로 배우고 싶으면 HeXA 들어오세요! http://www.hexa.pro 일단 코딩부터 해봅시다 HeXA - 기초부2 ReactJS Tutorial
  • 5. 에디터 설치 - SublimeText3 https://www.sublimetext.com/3 Portable version을 다운받는다. 압축을 푼다. 실행한다. 코딩한다. HeXA - 기초부2 ReactJS Tutorial
  • 6. 코드를 받아오자 • GIT이 있건 없건!! https://github.com/kimxogus/React-web-tutorial 들어갑니다. Star를 누릅니다. (프리미엄 A/S 서비스) Fork를 누릅니다. (다운로드가 빨라집니다. 똑같은 것 같다면 기분탓) Download ZIP을 클릭하여 zip파일을 다운 압축 풀기! HeXA - 기초부2 ReactJS Tutorial
  • 7. 일단 써보자 HTML <!DOCTYPE HTML> <html> <head> </head> <body> </body> </html> HeXA - 기초부2 ReactJS Tutorial 1_html.html
  • 8. 일단 써보자 HTML <body> <header> <nav></nav> </header> <div id=“main”></div> </body> HeXA - 기초부2 ReactJS Tutorial HEADER NAV MAIN 1_html.html
  • 9. 일단 써보자 HTML <body> <header> <nav></nav> </header> <div id=“main”> <div id=“content1” class=“content”></div> <div id=“content2” class=“content”></div> </div> </body> HeXA - 기초부2 ReactJS Tutorial HEADER NAV MAIN CONTENT1 CONTENT2 1_html.html
  • 10. 일단 써보자 HTML <body> <header> <nav></nav> </header> <div id=“main”> <div id=“content1” class=“content”> <div class=“title”></div> <div class=“description”></div> </div> <div id=“content2” class=“content”></div> </div> </body> HeXA - 기초부2 ReactJS Tutorial HEADER NAV MAIN CONTENT1 CONTENT2 TITLE DESCRIPTION 1_html.html
  • 11. 일단 써보자 HTML <body> <header> <nav></nav> </header> <div id=“main”> <div id=“content1” class=“content”> <div class=“title”></div> <div class=“description”></div> </div> <div id=“content2” class=“content”></div> </div> <footer></footer> </body> HeXA - 기초부2 ReactJS Tutorial HEADER NAV MAIN CONTENT1 CONTENT2 TITLE DESCRIPTION FOOTER 1_html.html
  • 12. 일단 써보자 JAVASCRIPT <footer></footer> <script> // 여기에 JS 코드를 삽입해볼겁니다! </script> </body> HeXA - 기초부2 ReactJS Tutorial HEADER NAV MAIN CONTENT1 CONTENT2 TITLE DESCRIPTION FOOTER 1_javascript.html
  • 13. 일단 써보자 JAVASCRIPT <script> var content2_html = document.getElementById("content2").innerHTML; document.getElementById("content2").innerHTML = content2_html + "<br><div class='title'>TITLE</div>"; var nav = document.getElementsByTagName("nav"); console.log(nav); </script> HeXA - 기초부2 ReactJS Tutorial HEADER NAV MAIN CONTENT1 TITLE DESCRIPTION FOOTER CONTENT2 TITLE 1_javascript.html
  • 14. 일단 써보자 JAVASCRIPT <script> var content2_html = document.getElementById("content2").innerHTML; document.getElementById("content2").innerHTML = content2_html + "<br><div class='title'>TITLE</div>"; var nav = document.getElementsByTagName("nav")[0]; console.log(nav); </script> HeXA - 기초부2 ReactJS Tutorial HEADER NAV MAIN CONTENT1 TITLE DESCRIPTION FOOTER CONTENT2 TITLE 1_javascript.html
  • 15. 일단 써보자 JAVASCRIPT <script> var content2_html = document.getElementById("content2").innerHTML; document.getElementById("content2").innerHTML = content2_html + "<br><div class='title'>TITLE</div>"; var nav = document.getElementsByTagName("nav")[0]; console.log(nav); nav.onclick = function() { alert("You’ve just clicked nav!"); } </script> HeXA - 기초부2 ReactJS Tutorial HEADER NAV MAIN CONTENT1 TITLE DESCRIPTION FOOTER CONTENT2 TITLE 1_javascript.html
  • 16. HTML & JS 끝! React에 들어가기 앞서… HeXA - 기초부2 ReactJS Tutorial
  • 17. WEB의 기본 MVC 패턴 Model View Controller 애플리케이션을 세가지의 역할로 구분한 개발 방법론 HeXA - 기초부2 ReactJS Tutorial 출처: 생활코딩
  • 18. MVC 패턴 예시) 쇼핑몰에서 장바구니에 상품 넣기 HeXA - 기초부2 ReactJS Tutorial VIEW CONTROLLER MODEL
  • 19. MVC 패턴 예시) 쇼핑몰에서 장바구니에 상품 넣기 1. 화면(View)에서 상품을 선택하고 장바구니에 넣기 버튼 클릭! HeXA - 기초부2 ReactJS Tutorial VIEW CONTROLLER MODEL
  • 20. MVC 패턴 예시) 쇼핑몰에서 장바구니에 상품 넣기 1. 화면(View)에서 상품을 선택하고 장바구니에 넣기 버튼 클릭! 2. Controller는 상품 정보를 Model에 반영 (장바구니에 상품 정보 추가) HeXA - 기초부2 ReactJS Tutorial VIEW CONTROLLER MODEL
  • 21. MVC 패턴 예시) 쇼핑몰에서 장바구니에 상품 넣기 1. 화면(View)에서 상품을 선택하고 장바구니에 넣기 버튼 클릭! 2. Controller는 상품 정보를 Model에 반영 (장바구니에 상품 정보 추가) 3. Controller는 변경된 Model의 정보를 View에 반영한다. HeXA - 기초부2 ReactJS Tutorial VIEW CONTROLLER MODEL
  • 22. React는 A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES HeXA - 기초부2 ReactJS Tutorial VIEW CONTROLLER MODEL
  • 23. React는 A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES View에만 초점을 맞췄다 MC를 원한다면 Flux, Redux같은 라이브러리, 혹은 Angular같은 MVC프레임워크와 함께 쓸 수 있다. HeXA - 기초부2 ReactJS Tutorial VIEW CONTROLLER MODEL
  • 24. React는 A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES View에만 초점을 맞췄다 MC를 원한다면 Flux, Redux같은 라이브러리, 혹은 Angular같은 MVC프레임워크와 함께 쓸 수 있다. HeXA - 기초부2 ReactJS Tutorial UI 짜기 좋다
  • 25. React로 짜면 const Header = React.createClass({ render: function() { return ( <header> <nav></nav> </header> ); } }); const Footer = React.createClass({ render: function() { return ( <footer></footer> ); } }); const Content = React.createClass({ render: function() { return ( <div id={this.props.content.id} className=“content”> <div className=“title”></div> <div className=“description”></div> </div> ); } }); const Main = React.createClass({ render: function() { var contents = [ {id:“content1”}, {id:”content2”} ]; return ( <div id=“main”> {contents.map(e=> <Content key={e.id} content={e}/> )} </div> ); } }); const HTML = React.createClass({ render: function() { return ( <div> <Header/> <Main/> <Footer/> </div> ); } }); ReactDOM.render( <HTML/>, document.getElementsByTagName(“body”)[0] ); HeXA - 기초부2 ReactJS Tutorial 코드는 길어졌으나 훨씬 알아보기 쉽다!
  • 26. React로 짜면 const Header = require(‘./Main’); const Main = require(‘./Main’); const Footer = require(‘./Footer’); const HTML = React.createClass({ render: function() { return ( <div> <Header/> <Main/> <Footer/> </div> ); } }); ReactDOM.render( <HTML>, document.getElementsByTagName(“body”)[0] ); HeXA - 기초부2 ReactJS Tutorial 컴포넌트 별로 따로 관리 > 재사용 가능
  • 27. HeXA - 기초부2 ReactJS Tutorial
  • 28. HeXA - 기초부2 ReactJS Tutorial
  • 29. React의 특징 JSX Virtual DOM 단방향 데이터 흐름 HeXA - 기초부2 ReactJS Tutorial
  • 30. JSX JS 코드에 XML을 직접 표현 const Content = React.createClass({ render: function() { return ( <div id={this.props.content.id} className=“content”> <div className=“title”></div> <div className=“description”></div> </div> ); } }); HeXA - 기초부2 ReactJS Tutorial
  • 31. JSX JS 코드에 XML을 직접 표현 > 표준 문법으로 컴파일(변환) var Content = React.createClass({ displayName: “Content”, render: function() { return ( React.createElement(‘div’, {id:this.props.content.id, className:“content”}, React.createElement(‘div’, {className:“title”}), React.createElemtn(‘div’, {className:“description”}) ) ); } }); HeXA - 기초부2 ReactJS Tutorial
  • 32. JSX JSX문법이 아닌 일반 JS 문법을 사용할 수도 있으나 변X난 더러운 코드가 좋아! (...)가 아니라면 JSX 쓰는게 바람직하다. HeXA - 기초부2 ReactJS Tutorial
  • 33. Virtual DOM 빠르고 좋다! HeXA - 기초부2 ReactJS Tutorial 출처: goo.gl/4dKdPz
  • 34. 단방향 데이터 흐름 Property를 이용한 상위 요소 > 하위 요소의 데이터 흐름 <div id={this.props.content.id} className=“content”> 이벤트를 통해 하위 컴포넌트의 변화를 감지할 수 있다. : 상위 컴포넌트가 하위 컴포넌트에 이벤트를 추가하여 감지 양방향 데이터 바인딩을 원한다면 다른 라이브러리, 프레임워크를 붙여 쓸 수도 있다. HeXA - 기초부2 ReactJS Tutorial
  • 35. JSX JS 코드에 XML을 직접 표현 > 표준 문법으로 컴파일(변환) var Content = React.createClass({ displayName: “Content”, render: function() { return ( React.createElement(‘div’, {id:this.props.content.id, className:“content”}, React.createElement(‘div’, {className:“title”}), React.createElemtn(‘div’, {className:“description”}) ) ); } }); HeXA - 기초부2 ReactJS Tutorial Node.js로!
  • 36. Node.js 설치 https://nodejs.org/en/ 다운받는다. 설치한다. Win + R 하고 cmd 입력 후 엔터 node–v 입력 후 엔터 Node.js 버전이 나온다면 성공! HeXA - 기초부2 ReactJS Tutorial
  • 37. 일단 써보자 JS with Node.js app.js console.log(“Hello HeXA!”); 콘솔 Hello HeXA! HeXA - 기초부2 ReactJS Tutorial
  • 38. 일단 써보자 JS with Node.js app.js var http = require('http'); var port = 8080; http.createServer(function(req,res) { res.end("Hello HeXA!"); }).listen(port); 브라우저 http://localhost:8080/ Hello HeXA! HeXA - 기초부2 ReactJS Tutorial
  • 39. 다음 시간엔… Node.js를 활용한 다양한 JSX 컴파일 방법 React의 데이터 바인딩(props, state) 예제를 활용한 React 실습 HeXA - 기초부2 ReactJS Tutorial