Intro
개발을 시작하고 난 이래로 아직까지 react만 사용하였었지만, 이번에 가고싶은 회사의 기술스택이 vue를 사용 하는 곳이라 vue를 다뤄 볼 기회가 생겼다.
간단하게 미니 프로젝트를 진행하면서 어떤 공통점이 있고 차이점이 있는지 정리 해 보려고 한다.
react를 먼저 배우던 입장에서 작성이 될 것이고, 기본적으로 react와 어떤 차이점이 있는지, 어떻게 다르게 느꼈는가를 위주로 작성 해 보고자 한다.
공통점
우선 어떤 부분이 같은지 먼저 살펴보도록 하자.
- 컴포넌트 기반으로 동작한다.
- 가상돔(Virtual DOM)을 사용한다.
- 코어 라이브러리가 있고, 라우터, 전역 상태관리등은 별도의 라이브러리가 존재
우선 둘다 SPA를 만들기 위한 라이브러리이기 때문에, 컴포넌트 기반으로 동작하거나, 가상돔을 사용하여
성능 향상을 도모하고 있다.
공통점이라 할지는 애매했지만, vue3의 compositionAPI를 사용 할 경우, setup()이라는 함수 안에서
react와 유사하게 코드를 짜는것이 가능했다.
<script>
export default {
name: "App",
data() {
return {
count : 0
}
}
method: {
incCount() {
return this.count + 1;
}
}
}
</script>
<script>
import { reactive, toRefs } from 'vue';
export default {
name: "App",
setup() {
const state = reactive({
conut: 0
});
const { countValue } = toRefs(state);
const incCount = () => {
return countValue.value + 1
}
return { countValue }
}
}
</script>위의 코드가 기존 코드이고, 아래 코드가 compositionAPI가 적용 된 코드이다. 지금은 아래가 좀 더 길어 보이지만, life cycle등의 method도 setup안에 들어가게 되므로, 꽤나 편하게 작성 할 수 있었다.
차이점
vue의 특징
SFC
우선 SFC라는 개념이 있다.
SFC란 Single File Component의 약자로서, 하나의 파일이 하나의 컴포넌트를 담당하는 .vue라는 파일을 이야기한다.
때문에, vue의 page와 component는 .js혹은 .ts가 아니고 .vue로 만들어지게 된다.
이때, .vue의 파일 구조는 html을 담당하는 <template>, 자바스크립트가 작성 되는 <script>, 스타일을 정의하는 <style>이 그것이다.
이처럼 한 파일 안에 해당 컴포넌트가 가지고 있는 정보를 모두 볼 수 있기에, 한눈에 보기가 편해지는 장점이 있다.
react를 사용할 시 styled-component를 사용하지 않고 css파일이나 css전처리기를 사용하는 프로젝트라면 외부에 css파일을 만들고 왔다갔다하면서 관리해야하니 이 부분은 괜찮다고 느꼈다.
State
두번째로는 state와 불변성의 부재이다.
vue를 사용하면서는 data()안에 해당 컴포넌트에서 사용되는 값이 관리 된다. 마치 state처럼 사용 되는 값이지만, react처럼 불변성을 유지할 필요가 없다.
예를 들자면, state배열에 값을 추가 하기 위해서는 react에서는 불변성을 유지하는 concat을 사용해야 하지만, vue에서는 그대로 push를 사용해도 괜찮다는 것이다.
물론 불변성을 지킬때 처럼 concat등을 사용해도 문제 없다.
사실 처음 vue를 시작하면서 가장 혼란스러웠던 부분이 이 부분이었다.
react를 사용하면서 함수 안에 사용 되는 값이 state였는데, vue는 이 값에 대한 언급이 없었기 때문이다.
불변성을 지키며 사용하는것이 습관이 된 것도 혼란이 오는데 일조한 느낌도 없잖아 있었다.
처음부터 vue를 배웠다면, 오히려 쉽게 배우지 않았을까 하는 생각이 들었다.
반복렌더링
세번째는 반복해서 렌더링을 시킬때 이다.
react의 경우 JSX안에 자바스크립트로 대상 배열에 map함수를 사용하여 컴포넌트, 혹은 JSX를 렌더링 시켜야 했지만, vue의 경우는 v-for를 사용하여 조금 더 간단하게 사용이 가능했다.
오히려 map보다는 반복문에 가깝게 사용 할 수 있다는 점이 직관적이라 느꼈다.
// react
<ul>
{arr.map((item, index) => {
return <li key={index}>{item}</li>
})}
</ul>
// vue
<ul>
<li v-for="(item, index) in arr" :key="index">
{{item}}
</li>
</ul>위가 react에서의 사용이고, 아래가 vue에서의 사용이다.
태그 안에 반복문을 넣는다는 느낌으로 사용 할 수 있기에 직관적이다.
조건부 렌더링
조건부 렌더링을 사용할때, react처럼 삼항연산자, 혹은 &&등을 사용하여 조건부 렌더링을 처리하지 않고,
v-if라는 키워드를 사용한다.
실제 조건문처럼 v-if안에 컨디션을 입력하면, 해당 컨디션이 true가 될때 렌더링하게 된다.
물론 v-else와 v-else-if도 있어서, 이런 저런 조건에 대처하기 좋고, 가독성 향상에도 도움을 줄 것 같다.
작성법은 아래와 같다.
// true일때 렌더링
<div v-if="true"/>
// false일때 렌더링
<div v-else />러닝커브
우선 직접적으로 체감한 차이는 아니지만, 이와 관련해서 조사했을때, 많은 자료에서 러닝커브에 관한 이야기가 있었기에 생각한 바를 작성하고자 한다.
우선 익숙하지 않았던 차이가 있었지만, 대체로 react보다 배우기 쉽다고 생각한다.
만약 개발을 처음 시작하고 접한 SPA 라이브러리가 vue였다면, 역으로 react가 어렵게 느껴졌을 것이다.
앞서 말한 state와 불변성, 자바스크립트에 관한 지식등 요구하는 것이 많기에 처음 배운다면 이해하는데 시간이 좀 걸릴 것 같다.
하지만 react를 먼저 배운 내 경우, 아무래도 react적으로 생각하는 부분이 많았기에, 자체적인 문법과 vue만의 코딩스타일을 사용해야 하는 부분에서 혼란이 왔었다.
익숙해지고 나니 큰 문제는 아니었지만, 처음엔 굉장히 여러곳에서 자료를 찾았었다.
Outro
일단 가볍게 프로젝트를 하며 가능한한 직접 체감한 부분을 위주로 작성하다보니, 타 포스팅과 비교 했을때 없거나 다루지 않은 부분이 있을 수 있다.
아마 앞으로 여러 프로젝트를 하며 직접 체감하게 되지 않을까.
react만 사용했을때는 react말고 다른 라이브러리를 써봐야지 하다가도 크게 기회가 없었는데, 이번에 좋은 기회가 생겨서 새로운 세계에 발을 디디게 되었다.
물론 아직 굉장히 익숙하게 다루지는 않지만, 작게 프로젝트를 진행하면서 굉장히 어렵게 느껴지는 부분은 없었기에, 아주 좋은 인상을 남겼다.
