Vue의 setup()과 React 함수형 컴포넌트 비교

Vue의 setup()과 React 함수형 컴포넌트는 모두 함수 기반 선언형 UI를 구현하기 위한 핵심입니다.하지만 두 프레임워크가 상태와 렌더링을 관리하는 방식이 다르기 때문에, 이 둘에도 미묘한 차이가 있습니다.

✨ 공통점✅ 함수처럼 실행된다.둘 다 컴포넌트를 렌더링할 때마다 함수처럼 호출됩니다.✅ 상태 선언과 로직 작성이 한 곳에 모인다.둘 다 컴포넌트의 로직(데이터, 이벤트, 라이프사이클 등)을 한 함수 안에서 작성합니다.✅ 선언형 UI를 지향한다.상태가 변하면 UI를 자동으로 다시 렌더링합니다.

🚧 차이점

항목

Vue setup()

React 함수형 컴포넌트

상태 관리 방식

ref() / reactive()로 반응형 객체를 만든다.

useState()로 상태를 정의하고 setState()로 갱신

상태 위치

Vue 인스턴스에 속한다. (reactive system)

렌더링마다 순서대로 관리되는 상태 슬롯

호출 순서 규칙

순서가 달라져도 괜찮다. (Vue가 상태 객체를 기억)

호출 순서가 꼭 같아야 한다. (useState() 순서 중요)

라이프사이클

onMounted, onUnmounted 등 setup() 안에서 직접 사용

useEffect() 안에 의존성 배열과 함께 작성

템플릿 연결

return한 객체의 속성들이 템플릿과 자동 연결됨

JSX로 상태와 렌더링을 직접 매핑

📝 정리Vue와 React는 둘 다 현대적인 선언형 UI 개발을 지향하지만,Vue는 내부의 reactivity system이 상태를 관리하기 때문에 ref를 언제 어디서 선언해도 안전합니다.반면 React는 Hook의 순서에 의존하므로 최상단에서 항상 동일한 순서로 호출해야 합니다.

📌 Tip

Vue를 오래 써온 개발자라면 React에서도 상태 선언을 무심코 조건문에 넣기 쉽습니다.리액트에서는 반드시 모든 useState, useEffect가 컴포넌트 최상단에 선언되도록 주의하세요!