React useEffect 와 Vue watch, onMounted, onUnmounted, onUpdate 차이점

React useEffect는 다양한 기능을 제공한다.

React도 기존에는 라이프사이클에 맞게 각각 분리되었는데 통합되었고 Vue의 경우 기존의 속성을 그대로 유지하고 있다.

구분	React useEffect	Vue3	특징과 차이
마운트	useEffect(fn, [])	onMounted(fn)
언마운트	useEffect(() => {   return () => {} }, [])	onUnmounted(fn)
업데이트(리렌더링)	useEffect(fn) (배열 없음)	onUpdated(fn)
특정 값 감시	useEffect(fn, [val])	watch(val, fn)	watch는 기본적으로 변경 시에만 실행(Lazy) Vue는 이전 값(oldVal)을 기본 제공
즉시 실행 + 감시		watchEffect(fn)	사용된 반응형 변수를 자동으로 추적함 mount 시에도 실행 됨
의존성 관리	수동 (배열에 명시)	자동/명시 혼합

 

코드로 보면 다음과 같다.

React

  // mounted, unmounted
  useEffect(() => {
    console.log("mounted");

    return () => {
      console.log("unmounted");
    }
  }, []); // 빈 배열


  // 컴포넌트 update
  useEffect(() => {
    console.log("update");
  });

  useEffect(() => {
    console.log("count update");
  }, [count]);

Vue

onMounted(() => {
  console.log("mounted");
});

onUnmounted(() => {
  console.log("mounted");
});

onUpdate(() => {
  console.log("update");
});

watch(count, (newValue, oldValue) => {
  console.log(`카운트 변경: ${oldValue} -> ${newValue}`);
});

useEffect vs onMounted / onUnmounted

• React: 컴포넌트의 "탄생"과 "죽음"을 하나의 로직(Setup & Cleanup)으로 묶어서 관리합니다.
• Vue: 시작 시점(onMounted)과 종료 시점(onUnmounted)을 명확하게 분리하여 가독성이 높습니다.

useEffect vs watch

• React: 의존성 배열에 데이터 목록을 추가하면 "이 데이터가 바뀌면 이 효과를 일으켜라"라고 선언되고 첫 렌더링 때도 실행됩니다. 이를 방지하기 위해서 별도의 추가 코드가 필요합니다.
• Vue: watch는 값이 실제로 변했을 때만 트리거 됩니다. 데이터의 전후 상태를 비교해야 할 때 훨씬 직관적입니다.

useEffect vs watchEffect

둘 다 선언하자마자 즉시 실행되며, 내부의 변수를 추적합니다.

하지만 React는 의존성 배열을 수동으로 적어야 하고, Vue는 함수 내부에서 쓰인 변수를 자동으로 감지한다는 차이가 있습니다.

useEffect vs onUpdated

React에서 의존성 배열을 생략한 useEffect는 매 렌더링마다 실행되어 onUpdated와 비슷합니다.

그러나 Vue의 onUpdated는 데이터 변경뿐만 아니라 그로 인해 DOM이 다시 그려진 직후에만 실행되므로, 순수 로직보다는 DOM 조작(스크롤 등)에 특화되어 있습니다.

 

React는 의존성 관리를 디테일하게 할수 있다는 장점이 있지만 누락하면 버그를 만들 가능성이 큽니다.

또한 직관적이지 않은 면이 있습니다. Vue는 엄격하지만 실수를 만들 위험이 적다는 차이점이 있습니다.