[React] React와 Vue(Composition API)의 ref 차이점

 

1. 기본 개념

 

React: useRef와 useState를 별도로 사용
Vue: ref가 참조와 상태 관리를 모두 처리

 

 

2. 사용법

 

React

   import { useRef, useState, useEffect } from 'react';

   function MyComponent() {
     const inputRef = useRef(null);
     const [count, setCount] = useState(0);

     useEffect(() => {
       inputRef.current?.focus();
     }, []);

     return (
       <div>
         <input ref={inputRef} />
         <p>Count: {count}</p>
         <button onClick={() => setCount(count + 1)}>Increment</button>
       </div>
     );
   }

Vue

   <template>
     <div>
       <input ref="inputRef" />
       <p>Count: {{ count }}</p>
       <button @click="count++">Increment</button>
     </div>
   </template>

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

   const inputRef = ref(null);
   const count = ref(0);

   onMounted(() => {
     nextTick(() => {
       inputRef.value?.focus();
     });
   });
   </script>

 

 

3. 차이점

 

• React는 useRef와 useState를 구분하여 사용하지만, Vue는 ref로 둘 다 처리합니다.
• React에서 상태 업데이트는 setCount 함수를 통해 이루어지지만, Vue에서는 count.value를 직접 수정합니다.
• Vue의 ref는 반응형이며, 값이 변경되면 자동으로 재렌더링이 트리거됩니다.

 

3-1 . 컴포넌트에 ref 전달

React: forwardRef를 사용하여 명시적으로 ref를 전달해야 함
Vue: 기본적으로 ref를 자식 컴포넌트에 전달 가능

 

3-2. 노출 API

React: useImperativeHandle을 사용하여 부모에게 노출할 메서드 정의
Vue: expose 옵션 또는 defineExpose 매크로를 사용하여 노출할 속성/메서드 정의

 

 

3-3 . 값 접근

React: inputRef.current
Vue: inputRef.value

 

3-4 .상태 접근 및 수정

React: count (읽기), setCount(newValue) (쓰기)
Vue: count.value (읽기 및 쓰기)

3-5. 생명주기 관리

React: useEffect 훅 사용
Vue: onMounted 등의 생명주기 훅 사용

3-6. 반응성

React: 상태 변경 시 명시적으로 setCount를 호출해야 함
Vue: ref 값 변경 시 자동으로 반응성 트리거

3-7. 템플릿/JSX에서의 사용

React: JSX에서 ref={inputRef}로 사용, 상태는 직접 {count}로 사용
Vue: 템플릿에서 ref="inputRef"로 사용, 상태도 직접 {{ count }}로 사용