[React] 리액트 state 개념과 동작원리, 일반 변수와 비교

리액트 개념이 나오게 된 배경

기존의 자바스크립트로 화면의 UI를 바꿔주기 위해서는

let a = "기존의 html 내용"

a = "바꿔치기할 html 내용"

document.getElementById("content").innerHTML = a

이런식으로 특정 id 요소에 html을 바꿔주는 식으로 업데이트를 했었다.

 

이게 복잡하고 귀찮으니까

값이 바뀌면 알아서 UI를 바꿔줄 수 없을까? 해서 나온 개념이 state

 

 

 

일반변수로 선언했을 때

import React from 'react'
import './App.css'

function App() {

  let count = 0;

  const increase = () => {
    count = count+1;
    console.log("변수:" + count)
  }

  return (
    <main>
      <div>변수 : {count} </div>
      <button onClick={increase}>증가</button>
    </main>
  )
}

export default App

 

count의 초깃값을 0으로 선언 후,

button을 누르면 count 값이 +1 씩 될 것을 기대하고 코드를 작성했다.

 

 

 

버튼을 세번 눌렀을 때의 결과창이다.

버튼을 누를 때마다 콘솔에는 +1씩 증가했지만

화면의 0 값은 증가하지 않았다...

 

리액트에서는 일반 변수와 state 를 구분해야 한다.

값에 액션을 취해서 --> 그 결과값이 화면에 표출되야 할 때에는 

일반 변수 선언이 아닌 state 선언을 해야 한다.

 

일반 변수일 때는 값이 바뀌어도 UI를 바꿔주지 않지만

state일 때는 값이 바뀌면 알아서 UI를 바꿔준다. (재랜더링 해준다)

 

 

즉, count가 +1 될 때마다 화면에도 변한 값을 보여주려면 state 로 선언해야 한다.

 

state 로 선언하기

import React, { useState } from 'react'
import './App.css'

function App() {
  //일반 변수 선언
  let count = 0;
  
  //state 선언
  const [count2, setCount2] = useState(0);

  const increase = () => {
    count = count+1;  //변수 증가
    setCount2(count2+1) //state 증가는 이렇게 작성한다
    console.log("변수:" + count+ " state:" + count2)
  }

  return (
    <main>
      <div>변수 : {count} </div>
      <div>state : {count2} </div>
      <button onClick={increase}>증가</button>
    </main>
  )
}

export default App

 

1. 상단에 import { useState } from 'react' 을 추가한다.

* useState 란 : 리액트에서 제공해주는 함수 중 하나, 전문 용어로 '리액트 훅' 이라 한다.

 

2. state 선언을 한다.

const [count2, setCount2] = useState(0); 

 

useState는 배열을 반환한다.

배열에는 state 와 state 값을 변경해주는 set함수가 들어있다.

 

useState의 매개변수 0은 state의 초기값이 되고, state명은  count2가 된다.

이 state 값을 변경할 때는 setCount2 함수를 써야한다.

 

 

 

버튼을 세번 눌렀을 때의 결과창이다.

변수와 state의 기댓값은 각각 1,2,3이다.

근데 콘솔창의 결과는 다르다.

 

왜 변수는 항상 1이고, state 값의 증가는 한박자씩 늦는걸까?

 

 

1. state 값이 한박자씩 늦는 이유

increase 함수는  setCount2 를 먼저 만나고 그 다음이 console.log 를 실행한다.

 

그러나 리액트에서는 set함수를 바로 실행하지 않는다.

 

리액트에서는 함수가 실행될 때, set함수를 만나면

set함수의 존재만 기억해둔다.

함수가 종료될 때까지 set함수를 실행시키지 않는다.

함수가 종료되면, set함수를 실행한다.

 

이렇게 동작하는 이유는

UI의 변경사항을 한꺼번에 실행하기 위함이다.

 

그렇기 때문에 console.log 먼저 실행되고 ( 현재 count2 출력 )

함수가 끝난 후 setCount2(count2+1) 을 실행한다. (이후 count2 값은 count2+1 로 저장됨 )

 

즉, set함수는 비동기적이다.

 

 

2. 변수가 항상 1인 이유

increase 함수는 setCount2 함수를 통해 state 값을 변경한다.

 

리액트는 state 값이 업데이트 될 때마다, function App() 을 다시 실행하면서 UI를 업데이트 한다.

App 컴포넌트를 재실행하므로, let count = 0 도 다시 실행된다.

 

 

즉, state 값이 업데이트가 되면 App 컴포넌트가 재실행 되므로,

변수의 값은 누적되지 않고 다시 초기화가 된다.

 

그래서 increase 함수가 실행될때 count는 무한히 1이 되는 것이다.

 

 

 

정리

1. state 값이 업데이트가 되면 App이 다시 실행되면서 변수의 값은 초기화 된다.

2. 변수는 UI에 표출하지 않아도 되는, 잠깐 쓰고 버려도 될 때만 사용한다.

3. state는 리액트가 주시하는 값으로, 값을 저장해둔다. UI에 표출되는 값일 때 사용한다.

4. state 값을 변경할 때는 set함수를 써서 변경해야 한다.

 

 

 

출처 : 아래 영상을 보고 공부한 것 정리해보았습니다. 감사합니다!

https://youtu.be/TFLvKGhrAwM?feature=shared