[React] React의 변수와 State 차이 알아보기

안녕하세요.

이번에는 React에서 사용하는 변수와 state의 차이에 대하여 알아보겠습니다.

 

 

1. State와 변수

• 우선 코드를 작성해서 확인을 합니다.

App.js

import './App.css';
import StateAndVariable from './components/StateAndVariable';

function App() {
  return (
    <div className="App">
      <StateAndVariable />
    </div>
  );
}

export default App;

 

components/StateAndVariable.js

import React, { useState } from 'react';

export default function StateAndVariable() {
  const [state, setState] = useState(0);
  let variable = 0;

  function setVariable() {
    variable += 1;
    console.log(`state: ${state} / variable: ${variable}`);
  }
  return (
    <div>
      {state} / {variable}
      <br />
      <button
        onClick={() => {
          setState(state + 1);
          setVariable();
        }}
      >
        +1
      </button>
    </div>
  );
}

 

실행결과

• State의 값이 변경되면 컴포넌트가 다시 리렌더링 되는 작업이 발생합니다.
• 그러면 variable 변수에 +1을 실행했어도 리렌더링 되면서 함수도 다시 불러오기 때문에 variable 변수가 다시 초기값인 0으로 설정이 되기 때문에 콘솔에는 초기값+1이 된 값이 나올지라도 실제 View에는 variable의 초기값인 0으로 출력이 됩니다.

 

이상으로 React의 변수와 state 차이에 대하여 알아보았습니다.

감사합니다.