[study] 단방향바인딩과 양방향 바인딩 [프론트엔드]

📙 바인딩은 무엇인가요 ??

바인딩(binding)은 프로그래밍에서 변수나 데이터를 다른 변수나 데이터와 연결하는 것을 말합니다. 즉, 어떤 변수나 데이터가 다른 변수나 데이터와 연결되어, 서로 영향을 주거나 동기화되도록 만드는 것입니다.

예를 들어, UI와 데이터 모델 간에 바인딩을 설정하면 UI에서 사용자 입력이 발생하면 이를 데이터 모델에 반영하고, 반대로 데이터 모델의 변경사항이 UI에 즉시 반영되도록 할 수 있습니다.

바인딩은 프로그래밍에서 매우 유용한 기능 중 하나이며, 데이터와 UI 간의 관계를 간편하게 다룰 수 있게 해줍니다. 예를 들어, Angular, Vue.js, React와 같은 프레임워크에서는 바인딩을 이용하여 UI와 데이터 모델을 연결하고, 변경사항을 자동으로 처리할 수 있도록 지원합니다.

📗 그럼 단방향 바인딩과 양방향 바인딩은 ??

단방향 바인딩

단방향 바인딩은 데이터 모델에서 UI로 데이터를 전달하는 방향으로만 바인딩이 이루어지는 것을 말합니다.
이 방식에서는 데이터 모델의 변경이 UI에 반영되지만, UI에서의 변경은 데이터 모델에 영향을 주지 않습니다.
React에서는 일반적으로 단방향 바인딩을 사용합니다.

즉, 단방향 바인딩은 데이터의 흐름이 한 방향으로만 흐르는 것을 의미합니다. 즉, 데이터의 변화가 View를 통해 Model까지 한 방향으로 전파됩니다. 이 방식에서는 데이터가 변경될 때마다 해당 데이터를 사용하는 모든 View가 다시 렌더링됩니다.

React 컴포넌트의 상태는 컴포넌트 내부에서 관리되고, 이 상태가 변경되면 React는 해당 컴포넌트를 다시 렌더링합니다. 이때, 변경된 상태가 자식 컴포넌트에 전달됩니다. 따라서, 데이터의 흐름이 한 방향으로만 흐르게 되는 것입니다.

단방향 바인딩의 장점은 데이터의 흐름이 명확하고 예측 가능하다는 것입니다.
또한, 데이터의 변경이 한 방향으로만 전파되기 때문에 디버깅과 유지보수가 쉽다는 장점이 있습니다. 하지만, View에서 발생하는 이벤트가 Model을 직접 변경할 수 없기 때문에 조금 더 복잡한 로직을 구현하기 위해서는 추가적인 작업이 필요할 수 있습니다.

View에서 발생하는 이벤트가 Model을 직접 변경할 수 없기 때문이라는 것을 좀 더 자세히 설명하자면

MVC 패턴에서 View와 Model은 서로 독립적인 컴포넌트입니다. View는 사용자와 상호작용하는 부분을 담당하고, Model은 데이터와 비즈니스 로직을 담당합니다. 이 두 개의 컴포넌트는 서로 영향을 끼치지 않아야합니다.

만약 View에서 Model을 직접 변경한다면, 이는 View와 Model이 서로 의존하게 되는 것입니다. 이것은 유지보수성과 확장성을 감소시키고, 결합도가 높아져 코드를 변경할 때 예기치 못한 문제가 발생할 수 있습니다. 또한, Model이 어떤 View에서 사용되는지 파악하기 어려워지기 때문에 코드의 가독성이 떨어지게 됩니다.

그래서 MVC 패턴에서는 View에서 Model을 직접 변경하는 것을 허용하지 않습니다. 대신, View는 Controller를 통해 Model을 간접적으로 변경하게 됩니다. 이렇게 함으로써 View와 Model의 결합도를 낮추고, 유지보수성과 확장성을 높일 수 있습니다.

양방향 바인딩

양방향 바인딩은 UI에서 데이터를 입력하면, 이를 데이터 모델로 전달하고, 데이터 모델의 변경사항도 즉시 UI에 반영되도록 하는 것을 말합니다. Angular, Vue.js와 같은 프레임워크에서는 양방향 바인딩을 지원합니다.

양방향 바인딩은 개발자가 직접 UI와 데이터 모델 간의 동기화를 관리할 필요가 없기 때문에 생산성이 높아지고, 코드량을 줄일 수 있지만, 대규모 애플리케이션에서는 바인딩이 너무 많아져서 성능 이슈가 발생할 수 있습니다. 반면, 단방향 바인딩은 개발자가 직접 데이터와 UI를 연결하고 관리해야 하지만, 성능 이슈를 예방할 수 있습니다.

예시를 들어 설명해보자

양방향 바인딩 예시
Angular에서는 양방향 바인딩을 지원합니다. 예를 들어, 다음과 같이 input 엘리먼트와 [(ngModel)] 디렉티브를 사용하여 양방향 바인딩을 구현할 수 있습니다.

<input [(ngModel)]="username">

위 코드에서는 input 엘리먼트에 입력한 값을 username 변수와 양방향으로 바인딩합니다. 이후에 username 변수의 값이 변경되면, 이를 다시 input 엘리먼트에 반영하여 UI를 업데이트합니다.

Vue.js에서도 마찬가지로 v-model 디렉티브를 사용하여 양방향 바인딩을 구현할 수 있습니다.

<input v-model="username">

위 코드에서도 input 엘리먼트에 입력한 값을 username 변수와 양방향으로 바인딩합니다. 이후에 username 변수의 값이 변경되면, 이를 다시 input 엘리먼트에 반영하여 UI를 업데이트합니다.

이처럼, 양방향 바인딩은 데이터와 UI를 연결하는 코드량을 줄이고, 개발 생산성을 높일 수 있지만, 대규모 애플리케이션에서는 성능 이슈가 발생할 수 있습니다.

마지막으로 리액트에서 View에서 발생하는 이벤트가 Model을 직접 변경하는 양방향 바인딩 코드 예시와 단방향 코드의 예시를 보고 마무리 하자.

양방향 바인딩 코드

import { useState } from 'react';

function TwoWayBindingExample() {
  const [value, setValue] = useState('');

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

  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
      <p>입력된 값: {value}</p>
    </div>
  );
}

위 예시에서, value prop은 모델의 값을 보여주며 handleChange 함수는 View에서 발생한 이벤트로 모델 값을 변경합니다. handleChange 함수에서는 event.target.value로 View의 값을 읽어와 setValue 함수를 사용하여 모델의 값을 업데이트합니다. 이렇게 구현하면 View에서 모델 값을 변경할 수 있습니다.

단방향 바인딩 코드

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  function handleIncrement() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
}

export default Counter;

위 코드에서는 handleIncrement 함수가 호출되면 count 변수의 값을 직접 변경하는 대신 setCount 함수를 호출하여 상태값을 갱신합니다. 이렇게 상태값이 변경됨에 따라 리액트는 자동으로 뷰를 업데이트하게 됩니다. 이러한 방식으로 단방향 바인딩을 구현할 수 있습니다.