[SpringBoot&React] 일반 변수와 useState() 차이

✅일반 변수의 선언 방식

let num = 1;
num = 2;

✅useState 선언 방식

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

✅useState 사용 시 주의할 점

• 상단에 정의할 것
• 바로 실행하지 말 것
• 반복문 안에 정의하지 말 것
• if문 안에 정의하지 말 것

 

🤍버튼을 눌렀을 때 1씩 증가하는 기능을 구현하고 싶을 때

아래와 같이 코드를 짜고 실행해 보면 버튼을 눌렀을 때 아무런 변화가 없으나

 

console.log(num); 을 찍어보면 1씩 증가하고 있는 것을 확인할 수 있다.

 

이때 useState()를 활용할 수 있다.

 

 

실행해 보면 버튼을 누를 때마다 1씩 증가하는 것을 확인할 수 있다.

useState를 사용하면 -> setNum이라는 함수를 사용했을 때 실행되는 순간 페이지가 다시 렌더링되는 것을 알 수 있다!

 

useState를 사용하지 않고 1초마다 수가 증가하는 함수 setTimeout 설정 시

 

1초마다 숫자가 증가하는 것을 확인할 수 있다.

 

💡일반 변수 : 새로고침해야 렌더 / useState : 값이 변경되면 자동으로 렌더 (새로고침 없이 갱신된 변수 사용 가능)

 

=>상황에 따라 렌더가 필요한지, 필요없는지 판단하여 적절하게 사용하면 된다.