Vue와 React에 대한 궁금증
궁금하다, Vue!
우연히 알게된 Vuepress에 이것저것 붙이고 싶은 기능들이 많아졌는데, Vue 기반이다보니 커스텀하기 위해서는 Vue가 어떻게 구현된건지 알아야될 것 같았다. 또 친구가 React 얘기를 하면 늘 Vue를 매번 좋다고 말하기에, React와 어떤 점이 그렇게 달라서 Vue를 편리하고 좋다고 말하는지 궁금해서 Vue는 어떤 식으로 컴포넌트를 만드는지 간단하게나마 알아봤다.
Vue의 사용상의 편리함을 알고 싶었기 때문에, React와 Vue의 기반에 대해서 비교하진 않았다.
Vue.js는 템플릿 엔진을 따로 사용하지 않고, 웹 컴포넌트 스펙과 유사하게 구현된 HTML 형식의 커스텀 element를 이용해서 Virtual DOM 렌더 함수로 컴파일하도록 구현되어있다고 한다.
Vue는 왜 배우기 쉬울까?
어떤 부분들이 Vue로 그렇게 구현하기 쉽게 만들었을까? React가 어렵긴 했지만, Vue도 프레임워크라서 이해하기 어려운건 매한가지일거라고 생각했다. 그런데 Getting Started를 보니 쉽긴 쉬울수도.. 하는 생각이 들었다. (React도 Getting Started는 금방 따라하긴 했던 것 같지만)
처음에 봤을 때 가장 먼저 느낀점은, HTML과 형태가 정말 비슷해서 웹 페이지를 한번이라도 만들어봤다면 쉽게 다가올 것 같다고 느꼈다. React 또한 최종적인 Render는 HTML 처럼 만들긴 하지만, Vue는 개인적으로 템플릿안에 JavaScript 코드가 들어가지 않아 HTML과 정말 많이 닮아있어서 훨씬 직관적이었다.
아래는 script 태그 내에 있는 items를 출력하는 페이지를 만든 코드이다. Vue는 v- 접두사를 가진 디렉티브(렌더링 된 DOM에 특수한 반응형 동작을 함)라는 속성을 이용해서 간단하게 for문을 작성할 수 있었다.
<div id='app'>
<ol>
<li v-for="item in items">
{ item.text } <!-- 원래는 괄호 두개 -->
</li>
</ol>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
items: [
{ text: '아이템1' },
{ text: '아이템2' },
{ text: '아이템3' }
],
},
});
</script>
만약 React였다면 아래와 같이 반복 출력을 만들어줘야했을 것이다. 확실히 출력이 아래로 가고, 로직과 아이템이 위에있다보니 초심자라면 한눈에 바로 알아보기에 무리가 있을 것 같다.
function App(){
const [items, setItems] = useState([
{
text: '아이템1',
},
{
text: '아이템2',
},
{
text: '아이템3',
}
]);
//...
return (
<ol>
{ items.map(item => <li>{ item.text }<li>) }
</ol>
)
}
디렉티브는 이 외에도 다양한 기능들이 존재했다. v-if, v-on:click, v-once 등..
자세하게 많이 보진 못했지만, 이 외에도 더 많은 디렉티브들도 있었고, v-on에는 수식어라는 기능들이 있어서 v-on:click.left와 같이 사용해서 왼쪽 버튼 마우스 클릭에 대한 이벤트만 처리하도록 할 수도 있었다.
v-if는 이름에서도 짐작할 수 있듯이, 어떤 값이 true일 때 값을 출력하는 디렉티브이다. v-else, v-else-if와도 같이 사용할 수 있다.
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else>
NOT A/B
</div>
특히 가장 신기하다고 느꼈던 부분은 v-once라는 디렉티브였다. 이 속성이 적용된 element의 경우에는, 한번 렌더링 되면 다음 렌더링에서 제외된다. 때문에 출력된 이후에 아이템을 바꾸더라도 그 출력이 변경되지 않는다. 정적인 컨텐츠들이 많은 경우에 성능 최적화를 위해 많이 사용된다고 한다.
<div id='app'>
<ol>
<li v-for="item in items" v-once>
{ item.text } <!-- 원래는 괄호 두개 -->
</li>
</ol>
<button v-on:click="onClick">
<!-- onClick으로 아이템4가 추가되어도, v-once 옵션으로 인해 위 내용이 변경되지 않는다. -->
</div>
<script>
const app = new Vue({
el: '#app',
data: {
items: [
{ text: '아이템1' },
{ text: '아이템2' },
{ text: '아이템3' }
],
},
methods: {
onClick: () => {
this.items.push({ text:'아이템4' });
}
}
});
</script>
이런 점들을 보아 React는 출력에도 JavaScript가 필요한 경우들이 꽤 있는데, Vue는 출력인 템플릿과, 동작인 스크립트가 잘 분리되어있다는 느낌이 들었다.
역할/의미별로 잘 분리되있는 코드 덕분에, 처음 접하는 사람들에겐 React보단 Vue가 쉽게 느껴졌을 것 같다.
React는 라이브러리인데 Vue는 왜 프레임워크일까?
Vue에 대해서 간단하게나마 알아보다가 든 생각은, 구현 방법들이 더 쉽긴 한 것 같은데 왜 Vue는 프레임워크라고 하고 React는 라이브러리라고 하지? 라는 생각이었다.
각 사이트에 들어가보면 아래와 같이 React는 라이브러리로, Vue는 프레임워크로 소개하고 있다.
라이브러리.. 프레임워크..?
라이브러리와 프레임워크의 차이점을 찾아보면, 가장 큰 차이점을 IoC(Inversion of Control, 제어의 역전)이라고 한다.
쉽게 말하자면 라이브러리는 내 코드가 라이브러리의 코드를 호출해서 그걸 이용해 구현하지만, 프레임워크는 내가 짠 코드를 프레임워크가 호출하여 새로 구성해주는 것을 말한다.
하지만 그래도 사실 잘 와닿지 않았다. 리액트는.. 내가 짠 코드를 새로 구성해주는 것 아닌가..? 음..
프레임워크 같기도 하고, 라이브러리 같기도..
그래서 찾아보니, 흔히 말하는 라이브러리와 프레임워크의 차이로 생각하기엔 조금 애매했다.
React는 직접 re-rendering을 제어할 수 있는 것처럼 사용자에게 제어권을 많이 일임하고 있다. DOM 조작, Component의 아키텍쳐, Component 레벨의 상태 관리들을 모두 허용하고 있고, 그 외적인 것들도 모두 사용자에게 맡겨져있다. 또 많은 React Application이 다른 third-parth 라이브러리에 의존하여 구성되어있기도 하다.
하지만 Vue의 경우에는 Syntactic Sugars(..?), 플러그인 시스템, 내장된 디렉티브들, Transition 등을 제공해서 사용하기 편리하긴 하지만 그만큼 자유도가 낮다. (React가 Component간에 상태 관리, 통신을 어떻게 처리하는지 잘 명시하고 있는 반면 Vue는 그렇지 않은 듯하다) 또 React와 대비되는 점은, 개발에 도움이 되는 라이브러리(라우터, Vuex와 같은 상태관리 툴)들을 Core Team에서 제공하고 있다는 것도 Vue가 좀 더 프레임워크에 가까운 이유라고 한다.
결론?
처음 이 생각이 들었을 땐, React를 이용해서 새로운 코드를 만들어내는 것 같긴 한데 Vue도 마찬가지로 Vue를 호출해서 새로운 걸 만든다는 것은 비슷한 것 같기도하고.. 그런데 Vue는 왜 프레임워크?? 하는 생각이 계속 꼬리를 물었다. Vue에 대해 너무 짤막하게만 알아봐서 잘 와닿지 않았던 것일수도
개인적으로 느낀 생각은 React는 사용자가 원하는 대로 구성할 수 있도록 자유도가 더 높기 때문에, 다른 프레임워크와의 차별점을 두기 위해 라이브러리라고 하는 게 아닐까? 라는 생각도 잠시 들었다.
참고한 글의 마지막에는 프레임워크와 라이브러리로 구분하기 애매한 부분들이 있으며, 해석이 열려있다고 마무리 짓는다. 나도 아직은 아무래도 열린 결말로 두어야할 것 같다..
이 글을 읽은 여러분은 어떻게 생각하는지 궁금하다..! React는 왜 라이브러리인 것 같나요?