React를 작성하듯이 Vue를 작성하십시오.

Vue 3 Composition API를 사용하여 기능적 구성 요소를 작성할 수 있습니다. React에서도 가능하지만 React에는 JSX와 같은 다른 템플릿이 있습니다. JSX 템플릿으로 Vue 기능 구성 요소를 작성하면 어떻게 됩니까? React 기능 구성 요소와 유사합니까?

두 프레임워크의 기능적 구성 요소가 어떻게 작동하는지, 그리고 얼마나 유사하거나 다른지 살펴보겠습니다. 이 목적으로 사용할 구성 요소는 버튼 클릭 수를 계산하는 카운터입니다. 또한 제한 매개변수를 수신합니다. 이 제한에 도달하면 구성 요소는 상위에 알립니다.

먼저 React 구성 요소를 만든 다음 Vue에 해당하는 구성 요소를 살펴보겠습니다.

반응

import { useState, useEffect } from 'react';

export const Counter = ({ limit, onLimit }) => {
  const [count, setCount] = useState(0);
  const handler = () => setCount(count + 1);

  useEffect(
    () => (count >= limit) ? onLimit() : null,
    [count]
  );

  return <button type="button" onClick={handler}>
    Count: {count}
  </button>;
};

React에는 구성 요소를 생성하기 위해 JSX 템플릿을 반환하는 일반 Javascript 함수가 필요합니다. 이 함수는 구성 요소의 상태가 변경될 때마다 다시 실행됩니다. useState 메서드를 사용하여 이러한 상태를 만들 수 있습니다. 상태 변수는 재실행 간에 값을 유지하는 일반 Javascript 구성입니다. 다른 모든 변수는 상태 변경 사이에 손실됩니다. 함수 상단의 console.log 문으로 테스트할 수 있습니다.

구성 요소에는 상위 구성 요소를 알리는 데 사용할 수 있는 제한과 방법이 있습니다. 증가할 때마다 현재 값을 확인하려고 합니다. useEffect 함수는 검사기 역할을 하며 두 번째 인수의 종속성이 변경될 때마다 콜백을 실행합니다.

간단히 말해서: React 구성 요소는 모든 상태 변경에 대해 다시 실행되고 JSX를 반환하는 일반 Javascript 상태 값이 있는 일반 기능입니다.

뷰

import { defineComponent, ref, watchEffect } from 'vue';

export const Counter = defineComponent({
  props: ['limit', 'onLimit'],
  setup(props) {
    const count = ref(0);
    const handler = () => count.value++;

    watchEffect(
      () => (count.value >= props.limit) ? props.onLimit() : null
    );

    return () => <button type="button" onClick={handler}>
      Count: {count.value}
    </button>;
  }
});

Vue에서 해당하는 일반 기능은 구성 요소 개체 내의 setup 메서드입니다. setup 메서드도 props를 입력 매개변수로 받지만 JSX 대신 JSX를 반환하는 함수를 반환합니다. 이유가 궁금할 수 있습니다.

그 이유는 setup 함수가 한 번만 실행되고 반환된 함수만 상태 변경 시 실행되기 때문입니다. setup 함수가 한 번만 실행되는 경우 Vue는 어떻게 변경 사항을 감지할 수 있습니까? 비결은 Vue의 반응성 시스템에 있습니다. ref 함수는 JavascriptProxy 객체 내부에 원래 값을 래핑합니다. 모든 수정은 해당 구성 요소를 다시 렌더링하도록 Vue에 알리는 이 프록시를 통해 실행됩니다. 원래 값을 직접 수정하면 해당 변경 사항은 프레임워크에서 무시됩니다.

limit 및 notifier 함수는 함수 매개변수로 제공되지만 Vue에서는 구조화를 사용하지 않았습니다. 그 이유는 props도 Proxy 객체이고 구조를 해제하면 반응성을 잃기 때문입니다(변경되더라도 아무 일도 일어나지 않을 것입니다). 값 변경을 확인하려면 useEffect 함수를 사용해야 합니다. React와 달리 감시 종속성을 정의할 필요가 없습니다. Vue는 콜백 내부에서 사용하는 상태 변수( Proxies )를 알고 있기 때문에 자동으로 정의합니다.

Vue 개발자에게 이벤트 대신 함수를 사용하여 부모에게 알리는 것은 이례적일 수 있습니다. Vue의 안티패턴이라고 하는 사람도 있지만 최대한 React에 가깝게 만들기 위해 이 방법을 선택했습니다.

요약

두 프레임워크 모두 단일 기능으로 구성 요소를 생성할 수 있습니다. Vue 기능 구성 요소는 한 번만 실행되고 반환된 함수만 JSX를 다시 실행하고 반환하는 프록시 내부에 상태 값이 래핑된 함수입니다. React 기능 구성 요소는 상태 값을 일반 Javascript 구성으로 사용하여 상태가 변경될 때마다 다시 실행하고 JSX를 직접 반환하는 기능입니다.

차이점은 각 프레임워크가 반응성 문제를 해결하는 방식에 있습니다. React는 stateless 참조 비교 솔루션이고 Vue는 stateful Proxy 기반 솔루션입니다.

같은 컴포넌트를 다른 프레임워크에 최대한 비슷하게 접근하여 같은 컴포넌트를 작성하는 것은 흥미롭고 재미있는 실험이었습니다. 여러분도 흥미롭게 보시길 바랍니다. 내 Vue 3 Vite playground 에서 시도해 볼 수도 있습니다.