[React] 단방향 바인딩 vs 양방향 바인딩

728x90

오늘은 React를 공부하다가 나오는 '단방향 바인딩'의 개념을 '양방향 바인딩'과 비교해서 알아보도록 하겠습니다.

데이터 바인딩(Data Binding)이란?

그전에 데이터 바인딩이 뭔지 알아봅시다.

프론트엔드 개발에서 데이터 바인딩은 애플리케이션의 데이터(Model)와 UI(View)를 연결하는 과정을 의미합니다. 즉, 데이터가 변경될 때 UI가 자동으로 업데이트되거나, UI에서의 사용자 입력이 데이터에 자동으로 반영되도록 하는 메커니즘입니다.

단방향 데이터 바인딩(One-way Data Binding)이란?

1.1 개념

단방향 바인딩은 데이터가 한 방향(주로 부모 → 자식)으로만 흐르는 구조입니다. 즉, 상태(state)나 데이터가 변경되면 UI가 갱신되지만, UI에서 직접적으로 데이터를 변경할 수는 없습니다.

1.2 작동 방식

데이터 → UI: 애플리케이션의 데이터(상태)가 변경되면, 해당 데이터와 연결된 UI 요소(예: 텍스트, 입력 필드 값)가 자동으로 업데이트됩니다.
UI → 데이터 (간접적): React는 기본적으로 단방향 데이터 흐름을 지향하기 때문에, UI 요소 자체가 데이터를 직접적으로 변경할 수는 없습니다. 대신, 사용자가 UI와 상호작용하여 발생한 이벤트(예: 입력, 클릭)를 감지하고, 이 이벤트를 처리하는 '이벤트 핸들러 함수'를 호출하는 방식으로 데이터를 업데이트하는 것은 가능합니다.

1.3 특징

명확한 데이터 흐름: 데이터의 흐름이 한 방향으로만 이루어져 예측 가능하고 디버깅하기 쉽습니다.
복잡성 관리 용이: 애플리케이션의 규모가 커지고 데이터의 흐름이 복잡해질수록, 단방향 흐름은 데이터의 출처를 쉽게 추적할 수 있어 관리하기 용이합니다.
성능 이점: 필요한 경우에만 UI를 업데이트하므로, 양방향 바인딩에 비해 미묘한 성능 이점이 있을 수 있습니다.
예시 프레임워크/라이브러리: React, Vue.js (기본 철학), Redux, Flux 등

1.4 예제 코드

import React, { useState } from 'react';

function MyComponent() {
  const [userName, setUserName] = useState('홍길동'); // 데이터 (State)

  const handleChange = (event) => {
    // UI (input)에서 발생한 변경 이벤트를 감지
    // setUserName 함수를 통해 명시적으로 데이터(state)를 업데이트
    setUserName(event.target.value);
  };

  return (
    <div>
      {/* 데이터(userName)가 변경되면 <h1> 태그의 내용이 업데이트 */}
      <h1>안녕하세요, {userName}님!</h1>

      {/* input 값은 userName 데이터와 바인딩.
          input 값이 변경되어도 직접 userName을 바꾸지 않음.
          onChange 이벤트를 통해 handleChange 함수를 호출해야 함. */}
      <input
        type="text"
        value={userName} // 데이터 -> UI (단방향)
        onChange={handleChange} // UI -> 데이터 (이벤트 핸들러를 통한 간접적인 방식)
      />
    </div>
  );
}

export default MyComponent;

양방향 데이터 바인딩(One-way Data Binding)이란?

2.1 개념

양방향 바인딩은 데이터(Model)의 변화가 UI(View)에 자동으로 반영될 뿐만 아니라, UI(View)에서의 사용자 입력이 데이터(Model)에 자동으로 반영되는 방식을 의미합니다. 데이터와 UI가 항상 동기화됩니다.

2.2 작동 방식

데이터 ↔ UI: 애플리케이션의 데이터가 변경되면 UI가 즉시 업데이트됩니다.
UI ↔ 데이터 (간접적): UI 요소(예: 입력 필드)에서 사용자 입력이 발생하면, 해당 입력이 자동으로 데이터에 반영됩니다. 개발자가 별도의 이벤트 핸들러를 작성할 필요가 없거나, 매우 간결하게 작성할 수 있습니다.

2.3 특징

개발 편의성: 특히 폼(Form)과 같은 입력 요소를 다룰 때 코드를 간결하게 작성할 수 있어 개발 생산성이 높습니다.
복잡성 증가 가능성: 데이터 흐름이 양방향으로 이루어지기 때문에, 애플리케이션의 규모가 커지면 데이터의 변경 경로를 추적하기 어려워지고 예상치 못한 사이드 이펙트(side effect)가 발생할 수 있습니다.
성능 오버헤드: 항상 데이터와 UI를 동기화하려 하기 때문에, 미세한 성능 오버헤드가 발생할 수 있습니다.
예시 프레임워크/라이브러리: AngularJS, Angular, Vue.js (v-model 지시어), Ember.js 등

2.4 예제 코드

<template>
  <div>
    <h1>안녕하세요, {{ userName }}님!</h1>
    <input type="text" v-model="userName" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      userName: '홍길동' // 데이터
    };
  }
};
</script>

이 예시에서 v-model은 userName 데이터와 input 필드의 값을 연결합니다. userName이 바뀌면 input 값이 업데이트되고, input 값이 바뀌면 userName 데이터가 자동으로 업데이트됩니다. 개발자가 별도의 onChange 이벤트 핸들러를 작성할 필요가 없습니다.

요약해보면 요렇게 되겠네요.

이상입니다.

읽어주셔서 감사합니다.