1. hooks
- react의 state machine에 연결하는 기본적인 방법
2. useState()
- 항상 2개의 value를 return
- InitialState를 세팅할 수 있는 옵션 제공
const [item, setItem] = useState(1);
- array를 return 해야함
- array의 첫번째 요소는 item, 두번째 요소는 setItem
- 한가지만 사용하고 싶을 경우에는 아래와 같이 사용
const item = useState(1)[0]
const item = useState(1)[1]
import React, { useState } from "react";
const App = () => {
const [item, setItem] = useState(1);
const incrementItem = () => setItem(item + 1);
const decrementItem = () => setItem(item - 1);
return (
<div className="App">
<h1>Hello {item}</h1>
<h3>Here we go!</h3>
<button onClick={incrementItem}>Increment</button>
<button onClick={decrementItem}>Decrement</button>
</div>
);
};
export default App;
- Hooks을 사용하지 않고, class component로 코딩했을때
import React from "react";
class AppUgly extends React.Component {
state = {
item: 1
};
render() {
const { item } = this.state;
return (
<div className="App">
<h1>Hello {item}</h1>
<h3>Here we go!</h3>
<button onClick={this.incrementItem}>Increment</button>
<button onClick={this.decrementItem}>Decrement</button>
</div>
);
}
incrementItem = () => {
this.setState(state => {
return {
item: state.item + 1
};
});
};
decrementItem = () => {
this.setState(state => {
return {
item: state.item - 1
};
});
};
}
export default AppUgly;