Two-way data binding은 사용자 입력 및 모델 데이터 간에 양방향으로 데이터를 동기화하는 기능을 의미합니다. 이 기능은 Vue.js와 React에서 모두 제공되지만, 각각 다른 방식으로 구현됩니다. 이번 글에서는 Vue.js와 React에서의 Two-way data binding을 비교해보겠습니다.

Vue.js의 Two-way Data Binding

Vue.js에서는 v-model 디렉티브를 사용하여 Two-way data binding을 구현합니다. v-model을 사용하면 입력 요소값과 Vue 인스턴스의 데이터 속성이 서로 바인딩되어 실시간으로 동기화됩니다. 예를 들어, 아래의 코드는 Vue.js에서의 Two-way data binding을 보여줍니다.

<template>
  <div>
    <input v-model="message" type="text">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

위의 코드에서 v-model="message"는 입력 요소의 값과 message 데이터 속성을 양방향으로 바인딩합니다. 사용자가 입력한 값은 message에 실시간으로 업데이트되고, {{ message }}는 message의 현재 값을 보여줍니다.

React에서의 Two-way Data Binding

React에서는 Two-way data binding을 직접적으로 지원하지 않습니다. 대신, 컴포넌트 상태의 업데이트와 이벤트 핸들러를 사용하여 데이터를 동기화해야 합니다. 아래의 코드는 React에서의 Two-way data binding을 보여줍니다.

import React, { useState } from 'react';

function Example() {
  const [message, setMessage] = useState('');

  const handleChange = (event) => {
    setMessage(event.target.value);
  };

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

export default Example;

위의 코드에서 useState 훅을 사용하여 message 상태를 정의하고, handleChange 이벤트 핸들러를 통해 message를 업데이트합니다. 입력 요소의 값은 value 속성으로 설정되고, 변경될 때마다 onChange 이벤트 핸들러가 호출됩니다.

결론

Vue.js에서는 v-model 디렉티브를 통해 Two-way data binding을 간편하게 구현할 수 있습니다. 반면에 React에서는 컴포넌트 상태와 이벤트 핸들러를 사용하여 데이터를 동기화해야 합니다. 각각의 방식에는 장단점이 있으므로 프로젝트의 요구 사항에 맞게 선택해야 합니다.

#Vuejs #React