React - ParkEunwoo/seoul-smart-app GitHub Wiki
- MVC, MV* ํจํด์์ View๋ง ์ ๊ฒฝ์ฐ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
- ๊ฐ์์ DOM ๊ฐ์ฒด์ ๋ณ๊ฒฝ๋ ๋ฐ์ดํฐ๋ก ์์ฑ๋ Virtual DOM์ ๋น๊ต
- ๋ณ๊ฒฝ๋ ์์์ ๋ํด์๋ง ๊ธฐ์กด์ DOM ๊ฐ์ฒด์ ์ ์ฉํ๋ ๋ฐฉ์์ ์ฌ์ฉ
- ๋ฐ์ดํฐ๋ฅผ ์ ๋ฐ์ดํธํ๋ฉด ์ ์ฒด UI๋ฅผ virtual dom์ ๋ฆฌ๋ ๋๋ง
- ์ด์ vitrual dom์ ์๋ ๋ด์ฉ๊ณผ ํ์ฌ ๋ด์ฉ์ ๋น๊ต
- ๋ฐ๋ ๋ถ๋ถ๋ง ์ค์ dom์ ์ ์ฉ
ํน์ ๋ถ๋ถ์ด ์ด๋ป์ธ ์๊ธธ์ง ์ ํ๋ ์ ์ธ์ฒด
- ๋ฆฌ์กํธ๋ ์ฌ์ฉ์ ํ๊ฒฝ์ ์ ๊ณตํ๋ View๋ฅผ ์ฌ๋ฌ ๊ฐ์ ๊ตฌ์ฑ์์ (Component)๋ก ์ชผ๊ฐ์ ๊ตฌํ
- Component ํ๋ํ๋๋ View์ ๋ชจ์ต๊ณผ ๋์ ๋ฐฉ์์ ์ ์ํ๋ฉฐ ์ ์ฒด์ ์ธ ์ฑ์ ์ด๋ฌํ Component๋ค์ด ํฉ์ณ์ ธ ๋ง๋ค์ด์ง๊ฒ ๋จ
- Component๋ ์ฌ์ฌ์ฉ์ด ๊ฐ๋ฅํ API๋ก ๋ค๋ฅธ Component์์ ์ฌ์ฌ์ฉ์ด ๊ฐ๋ฅํ๋ฉฐ ๋๋ ๋ค๋ฅธ ์ฑ์์๋ ์ฌ์ฌ์ฉ์ด ๊ฐ๋ฅ
-
ํจ์ํ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ๋ state๋ component Life Cycle API๋ฅผ ์ฌ์ฉํ์ง ์๊ณ props๋ฅผ ๋ฐ์ ๋ทฐ๋ฅผ ๋ ๋๋งํ๋ Component์ ํํด์ ํจ์ํ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉ
-
ํจ์ํ ์ปดํฌ๋ํธ์ ๊ฒฝ์ฐ state๋ ์ผ๋ถ ๋ถํ์ํ ๊ธฐ๋ฅ๋ค์ ์ ๊ฑฐํ ํํ๋ผ class ํํ๋ก ์ ์ํ๋ Component๋ณด๋ค ๋ฉ๋ชจ๋ฆฌ ์๋ชจ๋์ด ์ ๊ณ ์ฑ๋ฅ์ด ์ข์..
- state๋ ์ฌ์ฉํ ์ ์์..
- props๋ ํน์ ์ปดํฌ๋ํธ์ ์์ฑ์ ์ง์ ํ ๋ ์ฌ์ฉ
- props๋ ํน์ ์ปดํฌ๋ํธ๋ฅผ ๋ถ๋ฌ์ ์ฌ์ฉํ๋ ๋ถ๋ชจ ์ปดํฌ๋ํธ(Component)์์ ์ค์ ํ ์ ์์
import React, { Component } from 'react';
import MyComponent from "./MyComponent";
class App extends Component {
render() {
return (
<div className="App">
<MyComponent name = "Soongsil"/>
</div>
);
}
}
export default App;
import React, { Component } from 'react';
class MyComponent extends React.Component
{
render(){
return(
<h1>Hello {this.props.name}</h1>
)
}
}
export default MyComponent;
- App์ปดํฌ๋ํธ = ๋ถ๋ชจ, MyComponent = ์์
- App์ปดํฌ๋ํธ์์ MyComponent์ ๋ํ name์ด๋ผ๋ props๋ฅผ Soongsil์ด๋ผ๋ value๋ก ์ ํด์ค
- MyComponent์์๋ ํด๋น props๋ฅผ ์ฝ๊ธฐ ์ ์ฉ์ผ๋ก๋ง ์ฌ์ฉ๊ฐ๋ฅ
import React, { Component } from 'react';
class Counter extends React.Component {
state = {
number: 0
}
add = () => {
this.setState({
number: this.state.number + 1
});
}
minus = () => {
this.setState({
number: this.state.number - 1
});
}
render() {
return (
<div>
<h1>์นด์ดํฐ</h1>
<div>๊ฐ: {this.state.number}</div>
<button onClick={this.add}>+</button>
<button onClick={this.minus}>-</button>
</div>
);
}
}
export default Counter;
-
์ฃผ์ฒด๊ฐ ๋๋ ์ปดํฌ๋ํธ(Component)์์ ์ง์ ๊ฐ์ ๋ณ๊ฒฝํ๊ณ ์ฝ์ ์ ์๋ state
-
ํด๋์ค ์ปดํฌ๋ํธ์์ ์ฌ์ฉ ๊ฐ๋ฅ
-
state๊ฐ์ ๋ณ๊ฒฝํ๋ ค๋ฉด ๋ฐ๋์ setStateํจ์๋ฅผ ์ด์ฉ (this,setState())
-
setStateํจ์๊ฐ ํธ์ถ์ด ๋์ผ renderํจ์๊ฐ ์คํ๋จ -> state๊ฐ์ ๋ณ๊ฒฝ๊ฐ๋ฅ
๋ง์ดํธ(Mount)๋ DOM ๊ฐ์ฒด๊ฐ ์์ฑ๋๊ณ ๋ธ๋ผ์ฐ์ ์ ๋ํ๋๋ ๊ฒ์ ์๋ฏธ
-
constructor
- ์ปดํฌ๋ํธ ํด๋์ค์ ์์ฑ์ ํจ์๋ก ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค ๋ ์ฒ์์ผ๋ก ํธ์ถ๋๋ ํจ์
- state์ ์ด๊ธฐ๊ฐ์ ์ง์ ํ ๋ ์ฌ์ฉ
-
getDerivedStateFromProps
- props์ state ๊ฐ์ ๋๊ธฐํํ ๋ ์ฌ์ฉํ๋ ํจ์
-
render
- ์ปดํฌ๋ํธ์ ๊ธฐ๋ฅ๊ณผ ๋ชจ์์๋ฅผ ์ ์ํ๋ ํจ์
- htmlํ์์ ๋ฌธ์ฅ์ ๋ฐํํ์ง ์๊ณ , ๋ทฐ๊ฐ ์ด๋ป๊ฒ ์๊ฒผ๊ณ ์๋ํ๋์ง ์ ๋ณด๋ฅผ ์ง๋ ๊ฐ์ฒด(๋ฆฌ์กํธ ์์)๋ฅผ ๋ฐํ
-
componentDidMount
-
- ์ปดํฌ๋ํธ๋ฅผ ์์ฑํ๊ณ ์ฒซ ๋ ๋๋ง์ด ๋๋ฌ์ ๋ ํธ์ถ๋๋ ํจ์
-
์ปดํฌ๋ํธ๊ฐ ์ ๋ฐ์ดํธ๋๋ ๊ฒฝ์ฐ๋ props ๊ฐ ๋ณ๊ฒฝ, state ๊ฐ ๋ณ๊ฒฝ, ๋ถ๋ชจ ์ปดํฌ๋ํธ๊ฐ ๋ฆฌ๋ ๋๋ง ๋ ๋, this.forceUpdate๋ก ๊ฐ์ ๋ก ๋ฆฌ๋ ๋๋ง ๋๋ ๊ฒฝ์ฐ
-
getDerivedStateFromProps
- ๋ง์ดํธ(Mount) ๊ณผ์ ์์๋ ํธ์ถ๋์๋ ํจ์
-
shouldComponentUpdate
- ์ปดํฌ๋ํธ๋ฅผ ๋ฆฌ๋ ๋๋ง ํ ์ง ๋ง์ง๋ฅผ ๊ฒฐ์ ํ๋ ํจ์
-
render
- ์๋ก์ด ๊ฐ์ ์ฌ์ฉํ์ฌ View๋ฅผ ๋ฆฌ๋ ๋๋งํฉ๋๋ค.
-
getSnapshotBeforeUpdate
- ๋ณ๊ฒฝ๋ ์์์ ๋ํ์ฌ DOM ๊ฐ์ฒด์ ๋ฐ์ํ์ง ์ง์ ์ ํธ์ถ๋๋ ํจ์
-
ComponentDidUpdate
- ์ปดํฌ๋ํธ ์ ๋ฐ์ดํธ ์์ ์ด ๋๋ ๋ฆฌ๋ ๋๋ง ํ์ ํธ์ถ๋๋ ํจ์
์ปดํฌ๋ํธ๊ฐ DOM์์ ์ ๊ฑฐ๋๋ ๊ฒ
- componentWillUnmount
- ํด๋น ์ปดํฌ๋ํธ๊ฐ ์ ๊ฑฐ๋๊ธฐ ์ง์ ์ ํธ์ถ