Hooks
render props, ๊ณ ์ฐจ ์ปดํฌ๋ํธ๋ฅผ ํตํด ์ปดํฌ๋ํธ ์ฌ์ฌ์ฉ?
context, ๊ณ ์ฐจ ์ปดํฌ๋ํธ, render props ๋ฑ์ ํตํด wrapper hell์ด ๋ฐ์?
-> Hook์ ์ฌ์ฉํ๋ฉด ์ปดํฌ๋ํธ๋ก๋ถํฐ ์ํ ๊ด๋ จ ๋ก์ง์ ์ถ์ํํ์ฌ ํ ์คํธ ๋ฐ ์ฌ์ฌ์ฉ ๊ฐ๋ฅ
-> Hook์ ๊ณ์ธต์ ๋ณํ ์์ด ์ํ ๊ด๋ จ ๋ก์ง์ ์ฌ์ฌ์ฉ ๊ฐ๋ฅ
Class ์ปดํฌ๋ํธ์ ๊ฒฝ์ฐ ๊ฐ ์๋ช ์ฃผ๊ธฐ ๋ฉ์๋์ ๊ด๋ จ ์๋ ๋ก์ง์ด ํฌํจ๋ ์ ์์
-> ํ๋์ ๋ก์ง์ ๋ง๋ค๊ณ ์ถ์๋ฐ ๊ฐ ์๋ช ์ฃผ๊ธฐ ๋ณ ๋ฉ์๋๋ 1๊ฐ ๋ฐ์ ์ฌ์ฉํ ์ ์๊ณ ์ด ์์ ๊ด๋ จ์๋ ๋ก์ง๋ ํฌํจ๋์ด ์์ผ๋ ์ฌ์ด๋ ์ดํํธ๋ ์ฌ์ฌ์ฉํ๊ธฐ๊ฐ ์ด๋ ต๋ค?
-> ์ํ ๊ด๋ จ ๋ก์ง์ ๋ฌถ์ฌ์๊ธฐ ๋๋ฌธ์ ์ปดํฌ๋ํธ๋ค์ ์๊ฒ ๋ถ๋ฆฌํ๊ธฐ๊ฐ ์ด๋ ต๊ณ ํ ์คํธ๋ ์ด๋ ต๋ค
import React, { Component } from 'react';
class Counter extends Component {
state = {counter: 0}
componentWillMount() {
//...
}
componentDidMount() {
//...
}
onIncrement = () => {
this.setState({
counter: this.state.counter + 1
});
}
onDecrement = () => {
this.setState({
cunter: this.state.counter - 1
});
}
render() {
return (
<div>
<p>{this.state.counter}</p>
<button onClick={this.onIncrement}>+</button>
<button onClick={this.onDecrement}>-</button>
</div>
)
}
}
export default Counter;
๊ทธ๋์ ์๋ช ์ฃผ๊ธฐ ๋ฉ์๋ ๊ธฐ๋ฐ์ผ๋ก ์ชผ๊ฐ๋ ๊ฒ๋ณด๋ค Hooks๋ฅผ ํตํด ์์ ๋ก์ง์ ๋ด์ ์ปดํฌ๋ํธ๋ฅผ ๋ฌถ์ ์ ์๋๋ก ํ๊ธฐ ์ํด ํ์ํจ
Class๋ ๋ฏธ๋ฆฌ ์ปดํ์ผํ๋ ๋ฐฉ์์ ์ ํฉํ์ง ์์ ์ ์๋ค
Hooks๋ฅผ ํตํด Class ์์ด๋ React ๊ธฐ๋ฅ์ ์ฌ์ฉํ ์ ์๊ฒ๋จ
Last updated