vue3 개발자였던 내가 보기 위해 비슷한 리엑트 훅 정리

useState → ref (가장 정확한 대응)

React

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

Vue 3

const count =ref(0);

개념 대응

• 변경되면 리렌더 트리거

• 값 보관용

• 자동 추적은 아님(직접 set 호출)

useState = ref + setter

Vue의 ref.value =를

React는 setState()로 강제한 구조

useEffect → watch + onMounted (조건에 따라)

React

useEffect(() => {
fetchData();
}, []);

Vue

onMounted(() => {
fetchData();
});

React

useEffect(() => {
fetchData(id);
}, [id]);

Vue

watch(id,() => {
fetchData(id);
}, {immediate:true });

개념 대응

• [] → onMounted

• [id] → watch(id)

• cleanup → onUnmounted / watch return

useEffect는 watch + lifecycle을 합쳐놓은 훅

useMemo → computed (의미상 거의 동일)

React

const total =useMemo(() => price * count, [price, count]);

Vue

const total =computed(() => price.value * count.value);

차이

• Vue: 자동 의존성 추적

• React: 의존성 배열 수동 선언

개념은 동일, React가 더 수동적

useCallback → “함수용 computed”

React

const onClick =useCallback(() => {
doSomething(id);
}, [id]);

Vue

const onClick =computed(() =>() => {
doSomething(id.value);
});

개념

• 함수 재생성 방지용

• React에서만 의미가 큼 (렌더링 특성 때문)

Vue에서는 거의 신경 안 쓰는 영역

useRef → ref (DOM) + “리렌더 안 나는 저장소”

React

const inputRef = useRef<HTMLInputElement>(null);

Vue

const inputRef = ref<HTMLInputElement |null>(null);

또 다른 useRef 용도

const timer = useRef<number |null>(null);

useRef = DOM 참조 + 리렌더 안 나는 변수

useContext → provide / inject

React

const theme =useContext(ThemeContext);

Vue

const theme =inject('theme');

개념

• 전역 의존성 주입

• prop drilling 회피

useReducer → Pinia / Vuex / reactive 객체

React

const [state, dispatch] =useReducer(reducer, initialState);

Vue

const state =reactive({ ... });

useReducer는 “작은 store”

Vue에서는 보통 Pinia로 승격됨

React Query useQuery →

watch + store + VueUse async 조합

Vue 쪽 감각적 대응

watch(
() => id,
async () => {
    data.value =awaitfetchData(id.value);
  },
  {immediate:true }
);

• Pinia 저장

• 캐싱 직접 구현

useQuery = watch(immediate) + 전역 캐시(store) + fetch 정책