[react] useState

• 버튼을 누르면 변수가 1씩 증가하는 화면을 구현해보자
• 아래의 코드는 변수는 1씩 증가하지만 화면에 반영되지 않는다.

function App(){
	
	let number = 1;//상태 값이 아니라 그냥 변수
	
	const add = ()=>{
		number++;
		console.log('add',number);
	};
//랜더링 시점 = 상태 값 변경
	return(
	<div>
		<div>
			<h1>숫자:{number}</h1>
			<button onClick = {add}>더하기</button>	
	</div>
</div>
);
}

number가 상태 변수가 아닌 그냥 변수이기때문에 UI가 변경되지 않는다.

react는 상태 변수의 변화는 감지하지만 일반 변수의 변화는 감지하지 않는다.

 

 

hooks라이브러리의 useState

function App(){
	
	//let number = 1;
	const [number,setNumber] = useState(1);//상태 값

	const add = ()=>{
		setNumber(number+1);
		console.log('add',number);
	};
//랜더링 시점 = 상태 값 변경
	return(
	<div>
		<div>
			<h1>숫자:{number}</h1>
			<button onClick = {add}>더하기</button>	
	</div>
</div>
);
}

변수를 상태 변수로 선언해주면 변경될 때마다 App()이 reload되면서 UI가 변경된다.

상태변수

• 선언

const [변수,set변수] = useState(초기값);

• 값 변경

set변수(변수+1);
//set변수(변수++); 불가능하다 변수++ == 변수=변수+1이기 때문에

• 다만, 상태 값이 변경되면 App() 함수가 reload되면서 return값 전부 rebuild된다.