React와 Vue를 사용해보고 느낀점

한호수 (The Lake)·2023년 9월 20일

개요

취직하게 되면서 vue를 사용하게 되었다. react를 주로 사용하던 내게 지인들은 vue가 더 쉽다고 이야기했는데 처음 vue를 접했을때는 와닿지 않았다. 하지만 사용하다 보니 왜 그런말을 하는지 이제는 알것같아서 글을 적는다.

template 문법

template 문법을 만났을땐 혼란 그 자체였다. 처음에는 vue를 CDN으로 불러와 script로 적용하는 방법부터 사용했는데 공식문서에서 봤던 template 문법하고 많이 달라서 헤맸었다.

// 공식문서에 본 Template 문법

<template>
  <p>{{ greeting }} World!</p>
</template>

<script>
module.exports = {
  data: function () {
    return {
      greeting: 'Hello'
    }
  }
}
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

하지만 그것은 웹팩과 바벨을 사용하여 마치 React의 JSX처럼 SFC(Single File Component)을 사용하는 방법이었고 스크립트로 이용할때는 js파일에서 template 속성에 문자열로 넘겨주는 방식이었다.

// Modal.js 컴포넌트
// 
export default {
  props: {
    show: Boolean
  },
  template: `
  <transition name="modal">
    <div v-if="show" class="modal-mask">
      <div class="modal-container">
        <div class="modal-header">
          <slot name="header">default header</slot>
        </div>

        <div class="modal-body">
          <slot name="body">default body</slot>
        </div>

        <div class="modal-footer">
          <slot name="footer">
            default footer
            <button
              class="modal-default-button"
              @click="$emit('close')"
            >OK</button>
          </slot>
        </div>
      </div>
    </div>
  </transition>
  `
}

이후에는 웹팩과 바벨을 설정하여 SFC 문법으로 작성하자 마치 JSX를 처음 만났을때와 같은 편리함을 느꼈다.

Options API 와 Composition API

React는 Class문법을 사용하던 때와 Hook과 함께 함수형으로 작성하는 방법이 있다. 그렇다. Vue도 비슷한 경험이 있었다.
아래는 Options API와 Composition API로 작성된 컴포넌트 script 부분이다.

<script>
// Options API
import Modal from './Modal.vue'

export default {
  components: {
    Modal
  },
  data() {				// data함수의 리턴값으로 객체를 넘겨주면
  						// 객체안에 있는 값들은 state가 된다.
    return {
      showModal: false
    }
  }
}
</script>

<script setup>
// Composition API
import Modal from './Modal.vue'
import { ref } from 'vue' // React의 useState와 비슷하다.

const showModal = ref(false)
</script>

Composition API는 Vue 2.7버전에 추가된 기능으로 함수 구성에 기반한 API 스타일에도 불구하고 공식문서에서는 컴포지션 API는 함수형 프로그래밍이 아니며, Vue의 변경 가능하고 세분화된 반응성 패러다임을 기반으로 하는 반면 기능적 프로그래밍은 불변성을 강조한다고 적혀있다.

회사에서는 Options API를 사용하기 때문에 Composition API가 조금 더 React과 비슷해서 좋았지만 아직은 사용할 수 없다.

State 관리

또한 State를 관리함에 있어 export 되는 객체에 data 함수의 return 값으로 넘겨주면 해당 값이 바뀔때 재랜더링이 이루어지는 식으로 관리했다.

// Home 컴포넌트
export default {
  name: "Home",
  data() {
    return {
      showModal: false
    }
  }
}

상태값을 가공해서 사용해야한다면 computed 메소드를 사용했으며 한 상태가 변경되었을때 실행시킬 함수가 있다면 watch 메소드를 사용하였다. (React의 useEffect와 흡사했다.)

// Home 컴포넌트
export default {
  name: "Home",
  data() {
    return {
      todo: "아침에 일어나기 "
    }
  },
  computed:{
    anotherTodo(){
    	return this.todo + "출근하기"	 // anotherTodo라는 state는 
      							// "아침에 일어나기 출근하기" 값을 가진다.
    }
  },
  wtach:{
  	todo(){	// todo가 바뀌면 콘솔을 찍는다. 메서드는 이름이 같아야한다.
    	console.log("Todo is Change") 
    }
  }
}

마무리

그 외에도 양방향바인딩(vue)과 단방향바인딩(react)의 차이점이라던지 비슷하지만 다른 라이프사이클이라던지 전역상태관리는 Vuex 원툴이라던지 SSR 시 Next랑 이름이 비슷한 Nuxt를 사용한다던지 하는 여러가지 차이점이 있었지만 가장 헷갈렸던 부분을 글로 적어보았다.

사람들이 vue가 익히기 쉽다고 말한부분은 javascript 프레임워크로써 언어의 자유로움보다는 정해진 방법대로만 사용하면 되니 부담이 줄어들고, vuex나 vue-router 처럼 대표적인 라이브러리가 정해져있어 라이브러리를 선택하는 부담을 줄일 수 있기 때문이라 이해했다.