루트 컴포넌트 렌더링 방식

Vue는 React와 마찬가지로 하나의 div 안에서 동작한다.

그리고 해당 div에 연결하는 방식은 조금 다르지만 비슷한 원리를 가지고 있다.

 

1) index.js(React) → main.js(Vue)

2) 부가 기능 없이 연결했을 때

// React
ReactDOM.render(
	<App />,
	document.getElementById("root"),
);

// Vue
createApp(App).mount("#root");

3) store 또는 router 연결했을 때

// React
ReactDOM.render(
	<Provider store={store}>
		<Router>
			<App />
		</Router>
	</Provider>,

	document.getElementById("root"),
);

// Vue
createApp(App).use(store).use(router).mount("#root");

React는 render 메서드에 컴포넌트와 이를 바인딩할 div를 인자로 넘겨준다.

이에 반해 Vue는 createApp 메서드를 사용하고, 체이닝을 통해 다양한 메서드를 연결시킬 수 있다.

코드를 보면 알 수 있듯이, React는 컴포넌트로 루트 컴포넌트를 감싸고 있는 방식이지만 Vue는 메서드 체이닝을 사용하기 때문에 다른 형태를 가지고 있다.