[ReactJS_etc] Difference between state and variable

이 글은 코딩알려주는누나의 [리액트 초보자 입문강의 3탄]를 수강하며 정리한 글입니다.

 

 

⚛️ 기본 환경: IDE: replit, Language: React

* replit: Browser 기반 IDE

 

 

🚨 화면단에 보여지는 요소들을 매번 업데이트할 경우, 비용과 시간이 많이 발생하는 문제를 해결하기 위해 variable 대신 state 사용

import React, {useState} from 'react';
 
import './App.css'
 
export default function App() {
  let count1 = 0;
  const [count2, setCount2] = useState(0);
  const increase = () => {
   count1 += 1;
    setCount2(count2 + 1);
    console.log('count1: ' + count1 + ', count2: ' + count2);
  }
  
  return (
    <main>
      <div>variable: {count1}</div>
      <div>state: {count2}</div>
      <button onClick={increase}>증가</button>
    </main>
  )
}
 

⭐ state는 변수와 달리 변경 시, state에 값을 직접 대입하는 것이 아닌 set 함수를 활용

React에서는 variable과 state를 구분하여 state가 업데이트 될 때만 UI(User Inferface, 사용자가 제품/서비스를 사용할 때, 마주하게 되는 면)를 업데이트

 

해당 동작에 대한 console.log를 살펴보면 다음과 같음

🚨variable-count1은 value가 1로 고정되며 state-count2는 UI보다 value가 1이 작음

⭐ useState() 사용 시, state값이 변경될 경우 해당 컴포넌트(App function)를 새로고침하여 변수값이 0으로 초기화되어 버튼 클릭시 초기값 0에 1을 더해주게 됨 → 변수의 값이 기억되지 않으므로 임시 저장용으로만 사용

⭐ useState()에서 set 메서드는 비동기적으로 작동 = UI를 업데이트하는 set 함수의 모든 동작을 모아서 한 번에 처리

console에 반환되는 값은 업데이트가 진행되기 전(set 함수가 동작하기 )의 값으로 반환이 되고, UI는 모든 set 함수가 한 번에 처리되어 업데이트 된 state 값을 전달받게 됨

  const increase = () => {
    count += 1;
    setCount2(count2 + 1);
    console.log('count1: ' + count1 + ', count2: ' + count2);
  }
 

increase 메서드 호출 시,

1. count1 업데이트

2. setCount2 대기

3. console.log 실행

4. 해당 컴포넌트 내 모든 set 함수 실행

5. UI 업데이트