react와 vue 비교(데이터 바인딩과 데이터 흐름)

웹 프레임워크에서 주로 쓰이는 react와 vue를 비교해 보겠다

그중에서도 데이터 바인딩과 데이터 흐름 방식에 대해 자세히 알아보자!

UI 라이브러리와 프레임워크

 

각각 공식문서에 따르면 react는 라이브러리이고 vue는 프레임워크로 소개되고 있다.

react는 라이브러리이기 때문에 리액트만으로 전역상태관리, 라우팅 등을 지원하지 않는다. 사용자가 별도의 라이브러리를 추가하여 사용해야 한다. 

vue는 프레임워크로 주어진 문법에 따라 사용해야 한다. 

 

코드 형태

react는 jsx를 사용하고 자바스크립트를 통해 UI로직과 DOM을 구현한다.

vue는 <template>에는 html, <script>에는 js, <style>에 css를 나누어 작성한다.

 

데이터 흐름

단방향 데이터 흐름이란?

데이터의 흐름이 한 방향으로만 진행되며 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방식을 말한다.

 

react와 vue는 모두 단방향 데이터 흐름을 지원한다.

예를 들어, react에서는 props로 부모에서 자식으로 데이터를 전달하고 자식 컴포넌트를 이를 받아서 사용한다.

 

부모에서 자식으로 데이터 전달은 단방향이지만 자식에서 부모로 데이터를 전달하기 위해서는 콜백 함수를 통해 이벤트를 발생시켜 부모 컴포넌트에서 처리해야 한다.

 

react에서 단향방 데이터 흐름 예제

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

// 부모 컴포넌트
function ParentComponent() {
  const [parentData, setParentData] = useState('');

  const handleChildDataChange = (childData) => {
    // 자식에서 받은 데이터를 처리
    // 부모의 상태 업데이트
    setParentData(childData);
  };

  return (
    <div>
      {/* 부모에서 자식으로 데이터 전달 */}
      <ChildComponent onDataChange={handleChildDataChange} />
    </div>
  );
}

// 자식 컴포넌트
import React, { useState } from 'react';

function ChildComponent({ onDataChange }) {
  const [childData, setChildData] = useState('');

  const handleChange = (event) => {
    const newData = event.target.value;
    // 자식에서 부모로 데이터 전달
    onDataChange(newData);
    // 자식의 상태 업데이트
    setChildData(newData);
  };

  return (
    <input type="text" value={childData} onChange={handleChange} />
  );
}

 

vue에서 단방향 데이터 흐름 예제이다.

<!-- 부모 컴포넌트 -->
<template>
  <div>
    <!-- 부모 데이터를 자식으로 전달하면서 바인딩 -->
    <ChildComponent :childData="parentData" @child-data-change="handleChildDataChange" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      parentData: '부모로부터 전달된 데이터'
    };
  },
  components: {
    ChildComponent
  },
  methods: {
    handleChildDataChange(newData) {
      // 자식에서 받은 데이터를 처리, 부모의 상태 업데이트
      this.parentData = newData;
    }
  }
}
</script>

<!-- 자식 컴포넌트 (ChildComponent.vue) -->
<template>
  <div>
    <!-- 자식이 받은 데이터를 표시하고, 부모로 데이터를 전달하는 이벤트 발생 -->
    <p>{{ childData }}</p>
    <input v-model="childData" @input="emitChildDataChange" />
  </div>
</template>

<script>
export default {
  props: ['childData'],
  methods: {
    emitChildDataChange() {
      // 부모로 데이터를 전달하는 이벤트 발생
      this.$emit('child-data-change', this.childData);
    }
  }
}
</script>

 

 

데이터 바인딩

데이터 바인딩이란?

화면상에 보이는 데이터와 브라우저 메모리에 있는 데이터를 서로 동기화하는 것을 의미한다. 

                    

react는 단방향 데이터 바인딩을 vue는 양방향 데이터 바인딩을 지원한다.

vue는 v-model 디렉티브를 통해 양방향 데이터 바인딩이 구현된다.

 

기본적인 폼 입력 값을 vue 인스턴스의 값과 동기화하는 방법을 보자

<input
  :value="message"
  @input="event => message = event.target.value">

 

:value="message"로 message를 input 요소의 value 속성에 바인딩한다. 데이터와 화면 간의 단방향 데이터 바인딩이 이루어진다. 

@input에서는 이벤트 발생 시 입력된 텍스트를 message에 값을 업데이트해준다. input 요소의 값과 vue의 인스턴스인 message값이 양방향으로 동기화되어 사용자가 입력한 값이 반영된다. 

 

vue에서는 이 번거로운 과정을 단순화하여 양방향 바인딩할 수 있는 v-model 디렉티브가 있다

<input v-model="message">

 

전체 예제 소스는 아래와 같다!

<script>
export default {
  data() {
    return {
      message: 'Hello, vue'
    }
  }
}
</script>

<template>
  <p>메세지 내용: {{ message }}</p>
  <input v-model="message" placeholder="메세지 입력하기" />
</template>

 

v-model은 다른 입력 유형인 <textarea> 및 <select>에서도 사용할 수 있다.

 

불변성

불변성이란?

데이터를 변경하지 않고 새로운 데이터를 생성하는 것을 의미한다.

원본 데이터를 직접 수정하지 않음으로써, 원본 데이터가 변경되지 않도록 보장한다.

 

react는 불변성을 지켜야 한다.

react는 상태값을 수정할때 값을 직접 수정하는 것이 아니라, 새로운 값을 만들어 setState를 통해 값을 수정한다.

 

상태가 변경되면 리렌더링이 발생하는데, 이때 참조값만을 비교해 변화를 알아차린다! 그래서 불변성을 유지해야 한다!
만약 불변성을 지키지 않는다면, 객체 내부를 모두 찾아보며 이전 상태와 비교를 해야 상태의 변화를 찾을 수 있어 비효율적이다.

 

vue는 직접적인 변경을 허용한다.

vue에서는 data를 직접적으로 변경해서 상태관리를 한다. 

 

그럼 하나씩 내부의 값이 변경되었는지 확인하는걸까?

아니다.

vue에서 data로 객체를 관리하게 되면, 모든 내부 속성에 대해서 getter/setter를 설정한다. 이 getter/setter에서 데이터 변경이 일어날 때 vue에 알리는 기능을 한다! 이렇게 해서 vue는 효율적으로 상태 변화를 감지하고 업데이트한다.

 

데이터바인딩 이해하기(단방향, 양방향 데이터 바인딩)

[JS] 데이터 바인딩 이해하기(단방향, 양방향 데이터 바인딩)

vue.js Form 입력 바인딩

Vue.js