React- setState

• state
  • 값이 변하게 되면 렌더링이 일어난다 -> 값이 변하게 되면 연관있는 컴포넌트들이 다시 렌더링되어 화면이 바뀌게 되는 것
  • setState는 state값을 변경시켜주는 함수
  • useState는 state, setState를 return하면서 초기값을 설정해주는 Hook
• 숫자 증가

const App = () => {
	const [number, setNumber] = useState(0);
	
	const onClick = () => {
		setNumber(number + 1);
		console.log(`number : ${number}`);
	};
	
	return <button onClick={onClick}>숫자 : {number}</button>;
};

• 해당 코드를 실행했을 때 콘솔은 number가 0,1,2,3으로 출력되고, 화면에는 1,2,3,4로 출력된다
  • 이유는? console.log가 setNumber 호출 직후 실행되는데 이때는상태 업데이트를 하기 전이고
  • 버튼을 클릭할 때마다 React는 상태를 업데이트하고 컴포넌트를 렌더링하면서 새로운 상태 값이 반영되어 화면에 표시되기 때 
• 12번줄을 다른방식으로도 표현 가능 -> setNumber((_number) => _number + 1);
  • 차이점은? setNumber(number + 1) -> 현재 상태인 number를 직접 참조하여 새로운 상태 값을 계산, setNumber가 호출될 때마다 number + 1하여 새로운 상태 값으로 설정(비동기적)
  •  setNumber((_number) => _number + 1) -> 업데이트 함수 사용, _number는 현재 상태의 가장 최신 값을 나타낸다. 상태업데이트를 실행할 때 현재의 상태 값을 받아서 이를 기반으로 다음상태 값 계산 -> 연속으로 발생할 때 최신 상채를 기반으로 실행되도록 보장!(비동기적 방식에서 안정)    

• useState의 두가지 버전

console.clear();

import React, { useState } from "https://cdn.skypack.dev/react@18";
import ReactDOM from "https://cdn.skypack.dev/react-dom@18";

const Num1Button = ({ num, setNum }) => {
	const onClick = () => {
		setNum(num + 1); //1
		setNum(num + 1); 
	};

	return <button onClick={onClick}>증가</button>;
};

const Num2Button = ({ setNum }) => {
	const onClick = () => {
		setNum((num) => num + 1); //1
		setNum((num) => num + 1); //2
	};

	return <button onClick={onClick}>증가</button>;
};

const App = () => {
	const [num1, setNum1] = useState(0);
	const [num2, setNum2] = useState(0);

	return (
		<>
			num1 : {num1} <Num1Button num={num1} setNum={setNum1} />
			<hr />
			num2 : {num2} <Num2Button setNum={setNum2} />
		</>
	);
};

ReactDOM.render(<App />, document.getElementById("root"));

• setNumber(num + 1)을 이용한 num1은 num값을 직접 참조하기 때문에 +1만 증가함
• setNumber((num) => num + 1)을이용한 num2는 최신 상태에 대해 값을 증가시키므로 +2씩 증가한다할 일 폼에 setState 추가!