React 튜토리얼 1차시

ReactAJAVASCRIPTLIBRARYFORBUILDINGUSERINTERFACES

강의 순서
1회차
개발 환경 구성 – SublimeText3, Node.js 설치 (필요시)
HTML, JS 기초
React 소개
Node.js 간단한 실습
2회차
React 튜토리얼
React 예제 작성
HeXA - 기초부2 ReactJS Tutorial

HTML
HyperText Markup Language
웹에서의 구조적 문서 작성을 위한 방법 제공
JAVASCRIPT
웹브라우저내에서 사용되는 객체지향 스크립트 언어
Node.js 등의 런타임 환경을 이용해 브라우저 밖에서도 사용 가능
JAVA랑 1도 상관없음!!

우리의 목적은 뭐다? React!
React를 하기 위한 기본중의 기본만 속성으로 빠르게!
제대로 배우고 싶으면 HeXA 들어오세요! http://www.hexa.pro
일단 코딩부터 해봅시다

에디터 설치 - SublimeText3
https://www.sublimetext.com/3
Portable version을 다운받는다.
압축을 푼다.
실행한다.
코딩한다.

코드를 받아오자
• GIT이 있건 없건!!
https://github.com/kimxogus/React-web-tutorial 들어갑니다.
Star를 누릅니다. (프리미엄 A/S 서비스)
Fork를 누릅니다. (다운로드가 빨라집니다. 똑같은 것 같다면 기분탓)
Download ZIP을 클릭하여 zip파일을 다운
압축 풀기!

일단 써보자 HTML
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>
1_html.html

<body>
<header>
<nav></nav>
</header>
<div id=“main”></div>
</body>
HEADER
NAV
MAIN
1_html.html

<body>
<header>
<nav></nav>
</header>
<div id=“main”>
<div id=“content1” class=“content”></div>
</div>
</body>
HEADER
NAV
MAIN
CONTENT1
CONTENT2
1_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>
</body>
HEADER
NAV
MAIN
CONTENT1
CONTENT2
TITLE DESCRIPTION
1_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>
<footer></footer>
</body>
HEADER
NAV
MAIN
CONTENT1
CONTENT2
TITLE DESCRIPTION
FOOTER
1_html.html

일단 써보자 JAVASCRIPT
<footer></footer>
<script>
// 여기에 JS 코드를 삽입해볼겁니다!
</script>
</body>
HEADER
NAV
MAIN
CONTENT1
CONTENT2
TITLE DESCRIPTION
FOOTER
1_javascript.html

HTML & JS 끝!
React에 들어가기 앞서…

WEB의 기본 MVC 패턴
Model View Controller
애플리케이션을
세가지의 역할로 구분한
개발 방법론
출처: 생활코딩

MVC 패턴
예시) 쇼핑몰에서 장바구니에 상품 넣기
VIEW
CONTROLLER
MODEL

MVC 패턴
1. 화면(View)에서 상품을 선택하고
장바구니에 넣기 버튼 클릭!
VIEW
CONTROLLER
MODEL

MVC 패턴
2. Controller는 상품 정보를 Model에 반영
(장바구니에 상품 정보 추가)
VIEW
CONTROLLER
MODEL

MVC 패턴
2. Controller는 상품 정보를 Model에 반영
(장바구니에 상품 정보 추가)
3. Controller는 변경된 Model의 정보를
View에 반영한다.
VIEW
CONTROLLER
MODEL

React는
A JAVASCRIPT LIBRARY FOR
BUILDING USER INTERFACES
VIEW
CONTROLLER
MODEL

React는
View에만 초점을 맞췄다
MC를 원한다면
Flux, Redux같은 라이브러리,
혹은 Angular같은 MVC프레임워크와
함께 쓸 수 있다.
VIEW
CONTROLLER
MODEL

React는
View에만 초점을 맞췄다
MC를 원한다면
Flux, Redux같은 라이브러리,
혹은 Angular같은 MVC프레임워크와
함께 쓸 수 있다.
UI 짜기 좋다

React로 짜면
const Header = React.createClass({
render: function() {
return (
<header>
<nav></nav>
</header>
);
}
});
const Footer = React.createClass({
return (
<footer></footer>
);
}
});
const Content = React.createClass({
return (
<div id={this.props.content.id}
className=“content”>
<div className=“title”></div>
<div className=“description”></div>
</div>
);
}
});
const Main = React.createClass({
var contents = [
{id:“content1”}, {id:”content2”}
];
return (
<div id=“main”>
{contents.map(e=>
<Content key={e.id} content={e}/>
)}
</div>
);
}
});
const HTML = React.createClass({
return (
<div>
<Header/>
<Main/>
<Footer/>
</div>
);
}
});
ReactDOM.render(
<HTML/>,
document.getElementsByTagName(“body”)[0]
);
코드는 길어졌으나
훨씬 알아보기 쉽다!

React로 짜면
const Header = require(‘./Main’);
const Main = require(‘./Main’);
const Footer = require(‘./Footer’);
const HTML = React.createClass({
return (
<div>
<Header/>
<Main/>
<Footer/>
</div>
);
}
});
ReactDOM.render(
<HTML>,
document.getElementsByTagName(“body”)[0]
);
컴포넌트 별로 따로 관리
> 재사용 가능

React의 특징
JSX
Virtual DOM
단방향 데이터 흐름

JSX
JS 코드에 XML을 직접 표현
const Content = React.createClass({
return (
<div id={this.props.content.id}
className=“content”>
<div className=“title”></div>
<div className=“description”></div>
</div>
);
}
});

JSX
JS 코드에 XML을 직접 표현 > 표준 문법으로 컴파일(변환)
var Content = React.createClass({
displayName: “Content”,
return (
React.createElement(‘div’, {id:this.props.content.id, className:“content”},
React.createElement(‘div’, {className:“title”}),
React.createElemtn(‘div’, {className:“description”})
)
);
}
});

JSX
JSX문법이 아닌 일반 JS 문법을 사용할 수도 있으나
변X난 더러운 코드가 좋아! (...)가 아니라면 JSX 쓰는게 바람직하다.

Virtual DOM
빠르고 좋다!
출처: goo.gl/4dKdPz

단방향 데이터 흐름
Property를 이용한 상위 요소 > 하위 요소의 데이터 흐름
<div id={this.props.content.id} className=“content”>
이벤트를 통해 하위 컴포넌트의 변화를 감지할 수 있다.
: 상위 컴포넌트가 하위 컴포넌트에 이벤트를 추가하여 감지
양방향 데이터 바인딩을 원한다면
다른 라이브러리, 프레임워크를 붙여 쓸 수도 있다.

JSX
JS 코드에 XML을 직접 표현 > 표준 문법으로 컴파일(변환)
var Content = React.createClass({
displayName: “Content”,
return (
React.createElement(‘div’, {id:this.props.content.id, className:“content”},
React.createElement(‘div’, {className:“title”}),
React.createElemtn(‘div’, {className:“description”})
)
);
}
});
Node.js로!

Node.js 설치
https://nodejs.org/en/
다운받는다.
설치한다.
Win + R 하고 cmd 입력 후 엔터
node–v 입력 후 엔터
Node.js 버전이 나온다면 성공!

일단 써보자 JS with Node.js
app.js
console.log(“Hello HeXA!”);
콘솔
Hello HeXA!

일단 써보자 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!

다음 시간엔…
Node.js를 활용한 다양한 JSX 컴파일 방법
React의 데이터 바인딩(props, state)
예제를 활용한 React 실습

수고하셨습니다
김태현
kgyoo8232@gmail.com

React 튜토리얼 1차시

More Related Content

Similar to React 튜토리얼 1차시

React 튜토리얼 1차시