일반 변수와 useState() 차이

선언 방식

// 일반 변수
let num = 1;
num = 2;  // 2를 넣어주면 변경 됨

// useState
let [num, setNum] = useState(1); // num에 1이 들어감
setNum(2); //num에 2가 들어감

useState 사용 시 주의할 점

1. 상단에 정의할 것.

2. 바로 실행하지 말 것.

   → 직접 실행하거나 반복/조건 문을 사용하면 계속 렌더(무한 렌더)가 될 수 있음

3. 반복문 안에 정의하지 말 것.

4. if문 안에 정의하지 말 것.

일반 변수와 useState 차이

일반 변수를 사용해 이벤트가 실행되어 값이 증가 되면 증가 되어 변한 값을 보여주지 못함.

⇒ useState를 사용하면 보여줄 수 있음.

// 일반 변수 사용
fucntion App(){
	
	let num = 1;
	
	function numUp(){
		num += 1;
		console.log(num);// 콘솔값은 증가되나 화면의 num값은 변경되지 않음
	}

	return (
		<div className="App"> 
			<header className="App-header">
				<div> {num} </div>
				<button onClick={() => { numUp() } }>버튼<button>
			</header>
		</div>
	);
}

// useState 사용
fucntion App(){
	
	let [num, setNum] = useState(1);

	return (
		<div className="App"> 
			<header className="App-header">
				<div> {num} </div>
				<button onClick={() => { setNum(num = num + 1) } }>버튼<button>
			</header>
		</div>
	);
}

• 일반 변수

  새로고침을 해야 렌더가 됨

• useState

  값이 변경되면 자동으로 렌더가 됨

// 1초마다 변수 값 증가시키기
import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';

function App() {

  let [num,setNum] = useState(1);

  setTimeout(()=>{setNum(num+=1)},1000);

  return (
    <div className="App">
      <header className="App-header">
        <div>{num}</div>
      </header>
    </div>
  );
}

export default App;