리액트 useState

useState 를 사용하여 버튼 클릭시 1씩 증가시키기 

 

let num =1;

const add =()  =>{
	num++
   	console.log('add',num);
}

  return (
    <div>
      <div>
        <h1>숫자: {num}</h1>
        <button onClick={add}>더하기</button>
      </div>
    </div>
  );
}

export default App;

 

위의 코드를 보면 num 변수를 정의하여 함수에  num++ 로 하나씩 증가하도록 하였다.

일반적인 변수는 랜더링시점에 대해 리액트가 알지 못하기 때문에 상태값을 변경해야 한다. let num = 1; 의 구문을 주석처리 하도록 하겠다.

 

useState -    react안에 hooks 라이브러리를 사용한다. 

//let num =1;

const [num, setNum] = useState(1); //react안에 hooks라이브러리 사용
const add =()  =>{
	//num++
   	setNum(num+1);   //리액트에게 내부적으로 num 값 변경을 요청
    console.log('add',num);
}

  return (
    <div>
      <div>
        <h1>숫자: {num}</h1>
        <button onClick={add}>더하기</button>
      </div>
    </div>
  );
}

export default App;

일반적인 변수는 ui가 랜더링이 안된다. 

▷ const [num, setNum] = useState(1);  

setNum 호출이 될 때만 return이 된다. 

 

 

▷ setNum (num+1) 

리액트한테 num값을 변경한다고 요청하여 내부적으로 알아서 변경하도록 한다. setNum만 호출할 때 변경이 가능하도록 한다.