프론트엔드 개발에서 상태 관리는 아주 중요하고 핵심적인 부분입니다.

자 그러면 제목에 쓴 것과 같이 Vue 3의 ref와 React의 useState를 비교하면서 각각의 특징과 장단점을 살펴보겠습니다.

1. 기본 문법 및 사용법

• Vue 3

<script setup>
import { ref } from 'vue';

const count = ref(0);

const increment = () => {
  count.value++;
}
</script>

<template>
  <div>{{ count }}</div>
  <button @click='increment'>증가</button>
</template>

• React

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  const increment = () => {
    setCount(count +1);
  };
  
  return (
    <>
      <div>{count}</div>
      <button onClick={increment}>증가</button>
	</>
  );
};

2. 핵심 차이점

값 접근과 수정 방식

Vue의 ref는 .value를 통해 값에 접근하고 수정합니다. 그러나 템플릿에서는 .value 없이 직접 사용할 수 있습니다.

• Vue

const message = ref('Hello');
console.log(message.value); // 값 읽기
message.value = 'World'; //  값 수정

그리고 React의 useState는 값과 setter 함수를 배열 구조분해를 통해 제공합니다.

const [message, setMessage] = useState('Hello');
console.log(message); // 값 읽기
setMessage('World'); // 값 수정

객체 상태 관리

Vue의 ref는 객체의 직접적인 수정이 가능합니다.

• Vue

const user = ref({
  name: 'KHJ'
});

user.value.name = 'Kim HJ';

그러나 React의 useState는 불변성을 지켜야 합니다.

• React

const [user, setuser] = useState({
  name: 'KHJ',
});

// 새 객체를 생성하여 업데이트
setUser({...user, name: 'Kim HJ'});

3. 비동기 상태 업데이트

• Vue

const count = ref(0);

const increment = () => {
  count.value++;
  count.value++;
  count.value++;
}

Vue는 자동으로 배치 처리하여, 한 번의 렌더링으로 처리됩니다.
그에 반해, React는

• React

const [count, setCount] = useState(0);

// 잘못된 방식
const increment = () => {
  setCount(count + 1)
  setCount(count + 1)
  setCount(count + 1)
  // count는 단 1만 증가함
}

const increment = () => {
  setCount(prev => prev + 1);
  setCount(prev => prev + 1);
  setCount(prev => prev + 1);
}

배치 처리란?

• 배치 처리는 여러 개의 상태 업데이트를 하나의 리렌더링으로 묶어서 처리하는 최적화 기법입니다.

4. 🛠성능

• Vue
  Vue는 자동으로 필요한 부분만 리렌더링하며, 별도의 최적화 코드가 거의 필요하지 않습니다.

• React
  React는 useMemo, useCallback 등을 통한 명시적 최적화가 필요할 수 있습니다.

const memoizedValue = useMemo(() => 
  computeExpensiveValue(count), 
  [count]
)