[React] State Functions

1. state

const root = document.getElementById("root");
function App() {
	const [counter, setCounter] = React.useState(0);
    const onClick = () => {
    	setCounter(counter + 1);
    }
    return (
    	<div>
        	<h3>Total clicks: 0</h3>
            <button onClick={onClick}>Click me</button>
        </div>
    );
}
ReactDOM.render(<App />, root);

현재 counter state를 이용해서 새로운 counter state를 계산해냈다.
하지만 좋지 않은 방법인데, 이유는 counter는 다른 곳에서 업데이트가 될 수도 있기 때문이다.(우리가 생각하던 값이 아닐 수도 있다)

이런 일들이 자주 생기진 않겠지만 state를 바꾸는 2가지 방법이 있다.

1. setCounter()를 이용해서 원하는 값을 넣어주기
   하지만 다른 숫자로 변경은 불가하다.

setCounter(5);

5

2. 이전 값을 이용해서 현재 값을 계산하기
   계속 우리가 하던 방법이지만 더 나은 방법이 있다.
   만약 이전 값을 바탕으로 현재 값을 설정하고 싶다고 한다면, setCounter(counter + 1) 이 부분을 변경해주면 된다.
   이 함수의 첫 번째 argument는 현재 값이다.(current는 현재의 라는 뜻)

setCounter((current) => current + 1)

이 함수의 return 값이 새로운 state가 된다.
(current) => current + 1 이 함수가 뭘 return 하든지 그게 새로운 state가 된다.
이 방법이 react.js가 current가 확실히 현재 값이라는 걸 보장하고 있기 때문에 안전하다.

결론은
setCounter(counter + 1)과 setCounter((current) => current + 1)은 같은 작업을 하고 있는 것이다.
둘 다 현재의 state를 가지고 새로운 값을 계산해낸다. 하지만 후자가 더 안전.