react 튜토리얼 2차시

ReactA JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

강의순서

1회차개발환경구성 – SublimeText3, Node.js 설치 (필요시)

HTML, JS 기초

React 소개

Node.js 간단한실습

2회차React 튜토리얼

React 예제작성

HeXA - 기초부2 ReactJS Tutorial

오늘할것들!

리액트썰기props, stateReact Component SpecificationReact Component Lifecycle

예제(유배지) 만들기


코드를받아오자(업뎃함)

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


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



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






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






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

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

압축풀기!



props & state

props state

상위요소에게서상속(기본값은자신이정할수있다.)

스스로가지고있는값, 상태

값이바뀌면 Component가업데이트된다.(자세한건 Lifecycle참고)

하위요소로값을전달할수있다.(props 형태로전달)


React Component Specification

displayName : Component 이름(JSX를쓴다면신경X)

mixins : Addon

statics : Static 값또는함수

getDefaultProps : props의기본값

propTypes : props의타입정의

getInitialState : state 기본값정의

render : 렌더링함수 (필수!)


백문이불여일코HeXA @ UNIST const Content = React.createClass({

render: function() {return(

<h2>HeXA @ UNIST

</h2>);

}});

ReactDOM.render(<Content/>,document.getElementById(“container”)

);



render: function() {return(

<h2>{this.props.name} @ {this.props.school}

</h2>);

}});

ReactDOM.render(<Content name=“HeXA” school=“UNIST”/>,document.getElementById(“container”)

);



getDefaultProps: function() {return {

name: “HeXA”,school: “UNIST”

};},render: function() {

return (<h2>

{this.props.name} @ {this.props.school}</h2>

);}

});

ReactDOM.render(<Content/>,document.getElementById(“container”)

);



getDefaultProps: function() {return {

name: “HeXA”,school: “UNIST”

};},propTypes: {

name: React.PropTypes.string,school: React.PropTypes.string

},render: function() {

return(<h2>

{this.props.name} @ {this.props.school}</h2>

);}

});


백문이불여일코HeXA @ UNIST

0

const Content = React.createClass({...getInitialState: function() {

return {clicks: 0


return(<div>


</h2><h4>{this.state.clicks}</h4>

</div>);

}});


백문이불여일코HeXA @ UNIST

0

const Content = React.createClass({...getInitialState: function() {

return {clicks: 0


return(<div>


</h2><h4>{this.state.clicks}</h4><button type=“button” onClick={this.onClick}>

Increase Number</button>

</div>);

},onClick: function() {

this.setState({clicks: this.state.clicks + 1});}

});


Increase Number

백문이불여일코displayName, mixins, statics은쓸일거의없으므로생략

const Content = React.createClass({getDefaultProps: function() {

return {name: “Name”,school: “School”

};},propTypes: {

name: React.PropTypes.string,school: React.PropTypes.string

},

getInitialState: function() {return {

clicks: 0};

},render: function() {

return(<div>


</h2><h4>{this.state.clicks}</h4><button

type=“button” onClick={this.onClick}>Increase Number

</button></div>

);},onClick: function() {

this.setState({clicks: this.state.clicks + 1

});}});


React Lifecycle

• Mounting

componentWillMount

componentDidMount

• Updating

componentWillReceivePropsshouldComponentUpdatecomponentWillUpdatecomponentDidUpdate

• Unmounting

componentWillUnmount


React Lifecycle

• Mounting

componentWillMount : 컴포넌트생성전

componentDidMount : 컴포넌트생성후

• Updating

componentWillReceiveProps : 새로운 props 받기전shouldComponentUpdate : 컴포넌트업데이트여부componentWillUpdate : 컴포넌트업데이트전componentDidUpdate : 컴포넌트업데이트후

• Unmounting

componentWillUnmount : 컴포넌트소멸전


React Lifecycle 예시const Content = React.createClass({

...

componentDidMount: function() {alert(“Hi”);

},

...

});



...


},componentWillUpdate: function() {

alert(“Updating”);},

...});



...


},shouldComponentUpdate: function(newProps, newState) {

if(newProps.school == "UNIST") {return false;

} else {return true;

}},componentWillUpdate: function() {

alert(“Updating”);},

...});


React 컴파일

• Babel: 적용된 preset에맞게문법변환을해준다.

• Webpack: 문법변환뿐아니라라이브러리까지통합된

하나의 js파일로만들어주며(bundle) 설정을통한 Uglify(minify),

Common chunk 등의 optimization도지원

• Browserify: Webpack같은 js 번들라이브러리


준비작업

NPM (Node Package Manager) 를이용해라이브러리다운로드받기: npm install

babel, webpack 다운받기(Global Toolkit): npm install –g babel-cli webpack


Babel 컴파일

babel --presets react js/src/babel --out-dir js/out: --presets react > React 프리셋적용: js/src/babel > js/src/babel에있는 js파일을컴파일: --out-dir js/out > 컴파일된 js파일을 js/out로보냄

--watch 추가하면파일이변경될때마다자동으로컴파일!

package.json의 scripts에미리선언되어있다.npm run-script babel 입력하면실행가능


Babel 컴파일

Code [ src/Content.js ]

const Content = React.createClass({...

});

ReactDOM.render(...

);

Usage [React compiled by Babel]

<script src=“react.js”><script src=“react-dom.js”><script src=“out/Content.js”>


Webpack컴파일

webpack.config.js 파일에설정후 webpack 커맨드실행

webpack --progress --colors: --progress > progress를터미널에출력: --colors > 출력결과에색을입혀이쁘게출력

--watch 추가하면파일변경시자동컴파일

마찬가지로 package.json scripts에추가되어있음npm run-script webpack


Webpack컴파일

Code [ src/Content.js ]

const React = require(‘react’);

const ReactDOM = require(‘react-dom’);

const Content = React.createClass({...

});

ReactDOM.render(...

);

Usage [React compiled by Webpack]

<script src=“out/Content.js”>


배울건다배웠다.코-딩하자

유배지를웹으로구현하자

카테고리선택

카테고리에해당하는배달업소로드

이름, 전화번호, 위치보여주기!

js/src/UBaeZi 를보고따라해봅시다!


유니스트 배달 지존

모바일어플. 만들수있습니다.

const React = require(‘react’);: 웹

const React = require(‘react-native’);: 어플


수고하셨습니다김태현

[email protected]


react 튜토리얼 2차시

Technology