react 튜토리얼 1차시

ReactA JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

강의순서

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

일단코딩부터해봅시다


http://www.hexa.pro/

에디터설치 - SublimeText3

https://www.sublimetext.com/3

Portable version을다운받는다.

압축을푼다.

실행한다.

코딩한다.


https://www.sublimetext.com/3

코드를받아오자

• GIT이있건없건!!https://github.com/kimxogus/React-web-tutorial 들어갑니다.

Star를누릅니다. (프리미엄 A/S 서비스)

Fork를누릅니다. (다운로드가빨라집니다. 똑같은것같다면기분탓)

Download ZIP을클릭하여 zip파일을다운

압축풀기!


https://github.com/kimxogus/React-web-tutorial

일단써보자HTML<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

</body>

</html>


1_html.html

일단써보자HTML<body>

<header>

<nav></nav>

</header>

<div id=“main”></div>

</body>


HEADER

NAV

MAIN

1_html.html


<header>

<nav></nav>

</header>

<div id=“main”>

<div id=“content1” class=“content”></div>


</div>

</body>


HEADER

NAV

MAIN

CONTENT1

CONTENT2

1_html.html


<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


<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

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


HEADER

NAV

MAIN

CONTENT1

TITLE DESCRIPTION

FOOTER

CONTENT2

TITLE

1_javascript.html




var nav = document.getElementsByTagName("nav")[0];

console.log(nav);

</script>


HEADER

NAV

MAIN

CONTENT1

TITLE DESCRIPTION

FOOTER

CONTENT2

TITLE

1_javascript.html




var nav = document.getElementsByTagName("nav")[0];

console.log(nav);

nav.onclick = function() {

alert("You’ve just clicked nav!");

}

</script>


HEADER

NAV

MAIN

CONTENT1

TITLE DESCRIPTION

FOOTER

CONTENT2

TITLE

1_javascript.html

HTML & JS 끝!

React에들어가기앞서…


WEB의기본MVC 패턴Model View Controller

애플리케이션을세가지의역할로구분한개발방법론


출처: 생활코딩

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


VIEW

CONTROLLER

MODEL


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


VIEW

CONTROLLER

MODEL



2. Controller는상품정보를 Model에반영(장바구니에상품정보추가)


VIEW

CONTROLLER

MODEL



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({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({


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({


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 버전이나온다면성공!


https://nodejs.org/en/

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


수고하셨습니다김태현

[email protected]


react 튜토리얼 1차시

Technology