React 튜토리얼 2차시

ReactAJAVASCRIPTLIBRARYFORBUILDINGUSERINTERFACES

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

오늘 할 것들!
리액트 썰기
props, state
React Component Specification
React Component Lifecycle
예제(유배지) 만들기

코드를 받아오자(업뎃함)
• GIT이 있건 없건!!
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”)
);

return(
<h2>
{this.props.name} @ {this.props.school}
</h2>
);
}
});
ReactDOM.render(
<Content name=“HeXA” school=“UNIST”/>,
);

getDefaultProps: function() {
return {
name: “HeXA”,
school: “UNIST”
};
},
return (
<h2>
</h2>
);
}
});
ReactDOM.render(
<Content/>,
);

return {
name: “HeXA”,
school: “UNIST”
};
},
propTypes: {
name: React.PropTypes.string,
school: React.PropTypes.string
},
return(
<h2>
</h2>
);
}
});

HeXA @ UNIST
0
const Content = React.createClass({
...
getInitialState: function() {
return {
clicks: 0
};
},
return(
<div>
<h2>
</h2>
<h4>{this.state.clicks}</h4>
</div>
);
}
});

HeXA @ UNIST
0
...
return {
clicks: 0
};
},
return(
<div>
<h2>
</h2>
<button type=“button” onClick={this.onClick}>
Increase Number
</button>
</div>
);
},
onClick: function() {
this.setState({clicks: this.state.clicks + 1});
}
});
Increase Number

displayName, mixins, statics은
쓸 일 거의 없으므로 생략
return {
name: “Name”,
school: “School”
};
},
propTypes: {
name: React.PropTypes.string,
school: React.PropTypes.string
},
return {
clicks: 0
};
},
return(
<div>
<h2>
</h2>
<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
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
• Unmounting
componentWillUnmount

React Lifecycle
• Mounting
componentWillMount : 컴포넌트 생성 전
componentDidMount : 컴포넌트 생성 후
• Updating
componentWillReceiveProps : 새로운 props 받기 전
shouldComponentUpdate : 컴포넌트 업데이트 여부
componentWillUpdate : 컴포넌트 업데이트 전
componentDidUpdate : 컴포넌트 업데이트 후
• Unmounting
componentWillUnmount : 컴포넌트 소멸 전

React Lifecycle 예시
...
componentDidMount: function() {
alert(“Hi”);
},
...
});

...
alert(“Hi”);
},
componentWillUpdate: function() {
alert(“Updating”);
},
...
});

...
alert(“Hi”);
},
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 ]
...
});
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’);
...
});
ReactDOM.render(
...
);
Usage [React compiled by Webpack]
<script src=“out/Content.js”>

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

유배지를 웹으로 구현하자
카테고리 선택
카테고리에 해당하는 배달업소 로드
이름, 전화번호, 위치 보여주기!
js/src/UBaeZi 를 보고 따라해봅시다!
유니스트 배달 지존

모바일 어플. 만들 수 있습니다.
const React = require(‘react’);
: 웹
const React = require(‘react-native’);
: 어플

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

React 튜토리얼 2차시

Recommended

More Related Content

What's hot (18)

Viewers also liked (17)

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

React 튜토리얼 2차시