์ด์ ์ ticking clock ์์ ๋ฅผ
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById('root')
);
}
setInterval(tick, 1000);
์๋์ ๊ฐ์ด ๋ฐ๊พธ๋ ๊ฒ์ด ๋ชฉํ์ด๋ค. (์์ ํ ์บก์ํ + ์ฌ์ฌ์ฉ์ฑ)
ReactDOM.render(
<Clock />,
document.getElementById('root')
);
์ด๋ฅผ ์ํด์ state๊ฐ ํ์ํ๋ค.
Class ํ์ผ๋ก ์ ํํ ํ, state๋ฅผ ์ถ๊ฐํด์คฌ๋ค.
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('root')
);
2๊ฐ์ง ์ํฉ์ ํ์ด๋จธ๋ฅผ ์กฐ์ํด์ค ๊ฒ์ด๋ค.
DOM์ ์ฒ์์ผ๋ก ๋ ๋๋ง ๋์ ๋ (mounting)
DOM์์ ์ญ์ ๋์ ๋ (unmounting)
componentDidMount
๋ component์ output์ด DOM์ ๋ ๋๋ ํ์ ์คํ๋๋ค.
class Clock extends React.Component {
...
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
tick() {
this.setState({
date: new Date()
});
}
...
}
class Clock extends React.Component {
...
componentWillUnmount() {
clearInterval(this.timerID);
}
...
}
componentDidMount
, componentWillUnmount
์ ๊ฐ์ ๋ฉ์๋๋ค์ "lifecycle methods"๋ผ๊ณ ๋ถ๋ฅธ๋ค.
this.props
๋ this.state
๋ ์ด๋ฏธ React์์ ์ฌ์ฉํ๊ณ ์๋ค. ํ์ง๋ง this.timerID
๋ฑ data flow์ ์ฐธ์ฌํ์ง ์๋ ์ ๋ณด๊ฐ์ ๊ฒ๋ค์ ์ ์ฝ๋์์์ฒ๋ผ ์์ ๋กญ๊ฒ ๋ง๋ค์ด ์ฌ์ฉํด๋ ๋๋ค.
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date()
});
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('root')
);
์์ฝ
<Clock />
์ด ReactDOM.render()์ ๋๊ฒจ์ง๋ฉด, React๋ Clock
์ปดํฌ๋ํธ์ constructor๋ฅผ ํธ์ถํ๋ค. this.state์ ํ์ฌ ์๊ฐ์ ๋ด์ ์ด๊ธฐํํ๋ค.
๊ทธ ํ์ React๋ Clock
component์ render()
๋ฉ์๋๋ฅผ ํธ์ถํ๋ค. ์ด๋ฅผ ํตํด(๋ฐํ๊ฐ์ ํตํด) React๋ ์ด๋ค ๊ฒ๋ค์ ํ๋ฉด์ ๋ ๋ํด์ผํ๋์ง ์๊ฒ ๋๋ค.
Clock
์ปดํฌ๋ํธ๊ฐ ํ๋ฉด์ ๋ ๋๋ง ๋๋ฉด (DOM์ ์ถ๊ฐ๋๋ฉด), React๋ componentDidMount()
๋ฉ์๋๋ฅผ ํธ์ถํ๋ค. ๋ฉ์๋์ ์์ฑ๋๋๋ก browser๊ฐ timer๋ฅผ set upํ๋๋ก ํ๊ณ , ๋งค์ด๋ง๋ค tick()
๋ฉ์๋๋ฅผ ํธ์ถํ๋ค.
๋งค์ด๋ง๋ค ๋ธ๋ผ์ฐ์ ๊ฐ tick()
๋ฉ์๋๋ฅผ ํธ์ถํ๋ค. tick()
๋ฉ์๋ ๋ด๋ถ์์ setState()
๋ฉ์๋๋ฅผ ํธ์ถํ๋๋ฐ, React๋ setState()
๋ฉ์๋ ๋์ state๊ฐ ๋ฐ๋ ๊ฒ์ ์์ ์ฐจ๋ฆฐ๋ค. ๊ทธ๋ผ ๋ค์ render()
๋ฉ์๋๋ฅผ ํธ์ถํด์ ํ๋ฉด์ ๋ ๋ํด์ผ ํ๋ ๋ด์ฉ๋ค์ ์์๋ธ๋ค. ๋ฐ๋ ๋ด์ฉ์ด ์์ผ๋ฏ๋ก React๋ DOM์ ์
๋ฐ์ดํธํ๋ค.
Clock
component๊ฐ DOM์์ ์ฌ๋ผ์ง๋ฉด, componentWillUnmount()
๋ฉ์๋๋ฅผ ํธ์ถํด์ ํ์ด๋จธ๋ฅผ ๋ฉ์ถ๊ฒํ๋ค.
setState()
๋ฅผ ์ฌ์ฉํ ๋ ์ฃผ์ํ ์ธ๊ฐ์ง
// Wrong
this.state.comment = 'Hello';
// Correct
this.setState({comment: 'Hello'});
this.props
์ this.state
๋ ๋น๋๊ธฐ์ ์ผ๋ก ์
๋ฐ์ดํธ๋ ์ ์๊ธฐ ๋๋ฌธ์ ์ฃผ์ํด์ผํ๋ค.
// Wrong
this.setState({
counter: this.state.counter + this.props.increment,
});
setState์ ๋๋ฒ์งธ ์ฌ์ฉ๋ฒ์ผ๋ก ๋ฌธ์ ์ํฉ์ ํด๊ฒฐํ ์ ์๋ค. ์๋์ ๊ฐ์ด ์ฌ์ฉํ๋ฉด ์ฒซ๋ฒ์งธ ์ธ์๋ก state, ๋๋ฒ์งธ ์ธ์๋ก props๊ฐ ๋์ด์จ๋ค.
// Correct
this.setState((state, props) => ({
counter: state.counter + props.increment
}));
setState()
๋ฅผ ํธ์ถํ๋ฉด state
object๋ฅผ mergeํ๊ธฐ ๋๋ฌธ์ ์๋์ ๊ฐ์ด ์ฌ์ฉ ๊ฐ๋ฅํ๋ค.
componentDidMount() {
fetchPosts().then(response => {
this.setState({
posts: response.posts
});
});
fetchComments().then(response => {
this.setState({
comments: response.comments
});
});
}
๋ถ๋ชจ ์ปดํฌ๋ํธ๋ , ์์ ์ปดํฌ๋ํธ๋ ํน์ ๋ค๋ฅธ ์ปดํฌ๋ํธ๊ฐ statefulํ์ง statelessํ์ง๋ ์์ ์๋ค. ์ด๋ฐ ์ด์ ๋ก state๋ ์บก์ํ ๋ผ์๊ณ localํ๋ค๊ณ ํ๋ค.
์๋ ์ฝ๋์์ FormattedDate
์ปดํฌ๋ํธ๋ props๋ฅผ ํตํด date
๋ฅผ ์ ๋ฌ ๋ฐ์ ๊ฒ์ด์ง๋ง Clock
์ state์์ ์ ๋ฌ๋ฐ์๊ฑด์ง๋ ์ ํ ๋ชจ๋ฅธ๋ค.
<FormattedDate date={this.state.date} />
์ด๋ฐ ๋ฐฉ์์ "top-down" ํน "unidirectional" ๋ฐ์ดํฐ ํ๋ฆ์ด๋ผ๊ณ ๋ถ๋ฅธ๋ค. ํน์ ์ปดํฌ๋ํธ๊ฐ ์์ ํ ์ด๋ค state๋ "below"์ ์กด์ฌํ๋ ์ปดํฌ๋ํธ์๋ง ์ํฅ์ ๋ผ์น ์ ์๋ค.
์ปดํฌ๋ํธ๋ค๋ก ๊ตฌ์ฑ๋ ํธ๋ฆฌ๊ฐ ์๊ณ ์ด๋ฅผ props์ ํญํฌ๋ผ๊ณ ์๊ฐํด๋ณด๋ฉด, ๊ฐ ์ปดํฌ๋ํธ์ state๋ค์ ํ๋์ ๋ ๋ค๋ฅธ ์์์ง๋ผ๊ณ ์๊ฐํ๋ฉด ๋ ๊ฒ์ด๋ค. state๋ ์๋๋ก ํ๋ฅธ๋ค.
๋ฆฌ์กํธ ์ฑ์์, ์ปดํฌ๋ํธ๊ฐ statefulํ์ง statelessํ์ง๋ ์ปดํฌ๋ํธ๊ฐ ์๊ฐ์ด ์ง๋จ์ ๋ฐ๋ผ์ ๋ณํํ๋์ง์ ๋ฐ๋ผ ๊ฒฐ์ ๋๊ณ ๊ตฌํ๋๋ ๊ฒ์ด๋ผ๊ณ ํ ์ ์๋ค.