내가 React가 아닌 Vue를 쓰는 이유

1. Vue / React

       Vue                                                 React

 

Vue와 React는 모두 프론트엔드를 편하게 개발하기 위한 Javascript로 만들어진 도구이다.

이제는 이것들 없이 프론트 개발을 한다는 것은 상상하기도 싫다.

둘다 컨셉은 동일하다.

모든 UI를 스스로 동작하는 컴포넌트 단위로 개발해서 어디든 편하게 가져다 쓸 수 있게하는 것이다.

페이지 단위가 아닌 더 작은 단위의 컴포넌트를 개발하여 재사용성과 코드의 간결함을 유지한다.

 

모든 개발의 지향점은 코드 중복을 없애고 코드의 단위를 사람이 알기 쉽게 논리적으로 구조화하는 것이 궁극적 목적인데,

Vue와 React도 결국 이러한 목적을 위한 것이다.

 

 

2. NuxtJS / NextJS

이걸 또 더 편하게 개발하라고 

Vue는 NuxtJS, React는 NextJS 라는 프레임워크가 존재한다.

그냥 프로젝트 시작할때 프레임워크 다운받아서 거기에 맞춰서 개발하기 시작하면 된다는 거다.

이 얼마나 편한 세상인가?

 

 

3. Vue / React 코드 비교

우리나라에서는 거의 React가 대세인거 같다. React는 알아도 Vue는 모르는 사람들도 있다.

나도 처음에 React와 Vue를 가지고 고민을 했다. 뭘 써도 다 똑같은 결과물을 만들수는 있다는 걸 알지만,

그래도 되도록이면 개발이 편한걸 쓰고 싶었다.

 

근데 의외로 큰 고민의 시간없이 Vue를 선택하게 되었다.

그 이유는 아래와 같은 샘플코드때문이다.

React

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

root.render(<HelloMessage name="Taylor" />);

Vue

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

둘다 모두 컴포넌트를 정의하는 코드이다.

 

React는 render함수에서 HTML 코드를 리턴하는 구조이다. Javascript코드 내부에 HTML 코드가 들어있다.

 

Vue는 *.vue 확장자를 가지는 SFC라고 불리는 HTML 형태의 포맷을 지원한다.

 

각 영역별로 HTML, Javascript, Stylesheet 코드가 명확히 분리되어 정의된다.

 

<script>.     </script>	Javascript 코드영역
<template>     </template>	HTML 코드 영역
<style>.    </style>	CSS 코드 영역

 

Vue의 바로 이러한 특징이 내가 다른것도 안보고 Vue를 선택한 이유이다.

 

<template> 에서는 컴포넌트 구조를 잡는 HTML 코드만 넣으면 되고

<script> 에서는 이 HTML 구조를 동작하게 만드는 javascript 코드만 짜면 된다.

<style> 에서는 필요한 스타일만 정의하면 된다.

 

이 3개가 명시적으로 눈에 확 뛰게 분리되어 있다는 것이 나한테는 가장 와 닿았다.

보여지는 화면과 비지니스 로직의 영역이 분리되어 있는 것과 같다.

 

그렇다고 React가 이렇게 안되어 있다는 것은 아니다.

단지 Vue가 좀더 명확하게 이러한 코딩 패턴 문법을 제공하는 것이다.