state를 바꾸는 2가지 방법
const root = document.getElementById("root");
function App() {
const [counter, setCounter] = React.useState(0);
const onClick = () => {
setCounter(counter+1);
};
return (
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={onClick}>Click me</button>
</div>
);
}
ReactDOM.render(<App />, root);
JavaScript
복사
1. setCounter를 이용해서 우리가 원하는 값 넣어주기
•
setCounter를 설정해서 새 값으로 변경해주는 것
const root = document.getElementById("root");
function App() {
const [counter, setCounter] = React.useState(0);
const onClick = () => {
setCounter(987);
};
return (
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={onClick}>Click me</button>
</div>
);
}
ReactDOM.render(<App />, root);
JavaScript
복사
2. 이전 값을 이용해서 현재 값을 계산 → 더 바른 방법
•
현재 state를 기반으로 계산을 하고 싶다면, 함수를 이용 → 다음 state의 값이 현재 값을 바탕으로 나올 수 있도록
const root = document.getElementById("root");
function App() {
const [counter, setCounter] = React.useState(0);
const onClick = () => {
// setCounter(counter+1);
setCounter((current) => current + 1);
};
return (
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={onClick}>Click me</button>
</div>
);
}
ReactDOM.render(<App />, root);
JavaScript
복사