const [item, setItem] = useState(1);
useState는 항상 2개의 value 값을 return 시킨다.
const [item] = useState(1);
const item = useState(1)[0];
item 만 사용하는 경우에는 리스트에 담아서 선언해 주거나 단일로 인덱싱하여 사용한다
return (
<div className="App">
<h1>Hello {item}</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
JavaScript 표현식으로 item의 값을 return 시켜준다
화살표함수로 선언시 위와 같이 사용한다
const incrementItem = () => setItem(item + 1);
const decrementItem = () => setItem(item - 1);
incrementItem과 decrementItem 함수를 각각 선언해
return (
<div className="App">
<button onClick={incrementItem}>incrememt</button>
<button onClick={decrementItem}>decrememt</button>
</div>
);
onClick 이벤트에 함수를 선언해서 return 시켜준다.
import React, { useState } from "react";
export default function App() {
const [item, setItem] = useState(1);
const incrementItem = () => setItem(item + 1);
const decrementItem
= () => setItem(item - 1);
return (
<div className="App">
<h1>Hello {item}</h1>
<h2>Start editing to see some magic happen!</h2>
<button onClick={incrementItem}>incrememt</button>
<button onClick={decrementItem}>decrememt</button>
</div>
);
}
useState 전체코드
useState 를 사용하지 않은 형태의 코드를 작성할 시
import React, { useState } from "react";
class AppUgly extends React.Component{
state = {
item : 1
}
render(){
const {item} = this.state;
return(
<div className="App">
<h1>Hello {item}</h1>
<h2>Start editing to see some magic happen!</h2>
<button onClick={this.incrementItem}>incrememt</button>
<button onClick={this.decrementItem}>decrememt</button>
</div>
);
}
incrementItem = () => {
this.setState(state => {
return {
item : state.item + 1
}
})
}
decrementItem = () => {
this.setState(state => {
return {
item : state.item - 1
}
})
}
}
위와같은 형태로 class를 선언하여 긴 코드를 작성해야 한다.
hooks--> 함수형 프로그램 권장
