submit 버튼을 눌렀을 때 숫자를 두배로 늘려주는 함수를 작성해 보자

let number = 1;
const doubleUp = () => {
	number = number * 2
}

리액트에서 실행이 잘 될까..?

화면상에서는 변하지 않지만 콘솔에는 찍히고 있다. 그럼 왜 화면에서는 바뀌지 않을까?

리액트 컴포넌트는 변수가 바뀐다고 해서 화면에서 다시 렌더링 되지 않는다. 그렇다면 언제 렌더링을 할 수 있을까

바로 state가 변할때

useState로 상태 관리

const number = [number, setNumber] = useState(1) // 첫번째 인자는 state, 두번째 인자는 함수
const doubleUp = () => {
	setNumber(number * 2)
}

이렇게 작성하고 다시 눌러보게 된다면

이상없이 동작 하는 것을 확인 할 수 있다. 그런데 콘솔과 화면의 숫자가 맞지 않는다.. 이유는 컴포넌트가 리렌더링 되기 전에 콘솔이 찍히기 때문이다.

해결방안

const doubleUpNum = number * 2
...
console.log(doubleUpNum);

doubleUP 함수 내에 콘솔을 찍을 새로운 변수를 만들어 준다!