[React] useState, useRef, Variable 비교하기

안녕하세요.

이번에는 useState, useRef, Variable 3개를 비교해보도록 하겠습니다.

 

 

useState

• 변경 시 리렌더링되며, 변경 값으로 적용된다.

 

useRef

• 변경되어도 리렌더링되지 않지만, 값은 유지되며 리렌더링 시 변경 값으로 적용된다.

 

Variable

• 변경되어도 리렌더링되지 않으며, 리렌더링 시 초기 값으로 돌아간다.

 

 

/components/Comparing.jsx

import React, { useRef } from 'react'
import { useState } from 'react'

export default function Comparing() {
    const [countState, setCountState] = useState(0);
    const countRef = useRef(0);
    let countVar = 0;

    const [render, setRender] = useState(false);

    const countUpState = () => {
        setCountState(countState + 1);
        console.log('State :', countState);
    };

    const countUpRef = () => {
        countRef.current += 1;
        console.log('Ref :', countRef.current);
    };

    const countUpVar = () => {
        countVar += 1;
        console.log('Variable :', countVar);
    };

    const reRender = () => {
        setRender(!render);
    };

  return (
    <div>
        <h1>State : {countState}</h1>
        <h1>Ref : {countRef.current}</h1>
        <h1>Variable : {countVar}</h1>
        <br />
        <button onClick={countUpState}>State UP!</button>
        <button onClick={countUpRef}>Ref UP!</button>
        <button onClick={countUpVar}>Variable UP!</button>
        <button onClick={reRender}>렌더링!</button>
    </div>
  )
}

 

App.js

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

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

export default App;

 

실행결과

• 각 버튼을 클릭할 때 마다 값이 1씩 증가하게 설정하였으며, 콘솔 로그도 출력됩니다.
• 렌더링 버튼을 클릭하면 강제로 렌더를 발생시킵니다.
• useState는 바로 반영이 되며, 렌더링을 해도 값이 유지 됩니다.
• useRef는 콘솔로그에서 값은 증가하는 것으로 보이지만, 렌더링이 발생해야 적용되는 것을 볼 수 있습니다.
• Variable는 콘솔로그에서는 값이 증가해도 반영되지 않으며, 렌더링 이후에는 초기화되는 것을 볼 수 있습니다.

 

이상으로 useState, useRef, Variable 비교에 대하여 알아보았습니다.

감사합니다.