state에 값을 직접 할당하지 않는 이유

nomad 코더 react 초급을 듣다가 간과했던 사실을 발견했다.

바로 state 값을 변경할 때 직접 값을 할당해서 변경하지 않고 함수로 할당한다는 점이다.

	function App() {
    	const [counter, setCounter] = useState(0);
        const onClick = () => {
        	setCounter(counter + 1)
        }
    }

위와 같이 작성하게 되면 최신의 값이 아닌 과거의 값으로 계산이 된다.
최신의 값을 바탕으로 계산하려면 setCounter의 내부에 함수를 넣어주면 상태변화가 된다.

	function App() {
    	const [counter, setCounter] = useState(0);
        const onClick = () => {
        	setCounter((current) => current + 1)
        }
    }

modifier에 값이 아닌 함수로 할당하는 것이 더 안전하게 state를 관리하는 법이다.