vuejs vs reactjs / reactjs

Vuejs를 ReactJS 관점에서 비교

props

react 의 props 은 vuejs 에서도 props 이다.

state

react 의 state 에 해당하는 것이 vuejs 에서는 data 이다.

하지만 한가지 주의할 점은 data: function(){} 의 호출은 create 시점에만 호출된다는 점이다. 그래서 그 이후에 호출을 하게 하려면 vue component lifecycle 에 맞춰서 호출을 해야 한다.(update 시점등에서)

Understanding Vue.js Lifecycle Hooks | DigitalOcean

처음에는 vuejs 가 property 가 변하면(set) 알아서 render 를 호출한다고 이야기했기 때문에 data: function({}) 도 그 안의 property 가 변경되면 다시 호출될 것이라 생각했다. 하지만 data: function({}) 는 위에서 이야기 했듯이 component 가 생성되는 시점에 한번만 호출된다. 아래 예시를 확인하면, 좀 더 이해가 쉬울 것이다.

How Changes Are Tracked | Reactivity in Depth — Vue.js

setState

react 에서는 state 를 변경하기 위해 setState() 를 호출해야 한다. 이 것을 호출하면, 그에 따라 render 가 다시 호출된다. vuejs 에서는 이 부분을 getter setter 를 갖는 property 를 사용해 해결한다. 간단히 이야기하면, 그냥 정의된 값이 변경되면, 알아서 render 를 호출한다.

그래서 주의해야할 점은 자신이 render 를 호출했는지를 확인하기가 좀 까다롭다. 그래서 값을 변경했을때, 화면을 render 해주는지 안해주는지를 확인하려면, 이 값이 props 나 data 에 정의되어 있는 값을 변경하는지에 대한 판단이 필요하다.

non reactive property

https://github.com/vuejs/vue/issues/1988#issuecomment-354144340
https://github.com/vuejs/vue/issues/1988#issuecomment-356010141
static variable

https://github.com/vuejs/vue/issues/1988#issuecomment-402964241
실제로 static 이다. 그래서 같은 class 에서 값이 그대로 유지된다.

위에서 처럼 정의하는 대부분의 property 를 알아서 reactive 하게 만들기 때문에 반대로 non-reactive property 를 만들기가 어렵다. 일단 위에서 제시한 방법을 사용하면 될 듯 하다.

render()

vuejs 에서는 render 함수를 따로 쓸 수도 있지만, 아래 예시처럼 <template> tag 를 사용할 수도 있다. 그래서 간단히 이야기하면, <template> 이 곧 render 라고 생각하면 된다. 그래서 만약 react에서 props 이 변경되거나 setState 가 변경됐을 때 render 가 호출된다면, vuejs 에서는 template 을 다시 호출한다고 보면 된다.

개인적으로 이 template 이 좋지 않은건, browser debugger 에서 file 이 다른 부분과 분리되어서 다른 file 로 보여진다. 그래서 불편하다.

input, checkbox

기본적으로 react 에서는 state 또는 prop 을 변경시켜야 해당하는 element 의 상태가 변한다. 하지만 vuejs 은 이것을 그냥 둔다. 그래서 input 이나 checkbox 의 모습이 변했다고 해서 그것이 rendering 이 호출됐다고 볼 수 없다.

props.children

reactjs 에서는 props.children 를 사용할 수 있는데 그것을 vuejs 에서는 slot 이라는 이름으로 표현한다.

예시

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <my-template :msg="mymsg" />
    <button @click="onClick">change the text</button>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import MyTemplate from "./MyTemplate.vue";

export default Vue.extend({
  name: "Home",
  components: {
    MyTemplate,
  },
  data: function(){
    return {
      mymsg: "this is my message",
    }
  },
  methods: {
    onClick() {
      this.mymsg = "this is my message 2"
    },
  },
});
</script>

<template>
  <div class="">
    <h1>{{ msg }}</h1>
    <h1>{{ mystateMsg }}</h1>
    
  </div>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  name: "MyTemplate",
  props: {
    msg: String,
  },
  data: function () {
    return {
      mystateMsg: this.msg
    };
  },
});
</script>

쿠...sal

[컴] Vuejs를 ReactJS 관점에서 비교