react 양방향 바인딩 (2way data binding)

데이터 바인딩이란 ?

데이터 바인딩 : UI와 해당 UI가 표시하는 데이터를 연결하는 프로세스 입니다.
다르게 말하면 화면에 보여지는 데이터와(View) 와 브라우저 메모리에 있는 데이터(Model)을 묶어서(Binding) 서로 간의 데이터를 동기화 하는 것을 의미합니다.

 

양방향 바인딩이란 ?

리액트(React)에서 양방향 바인딩은 일반적으로 부모 컴포넌트와 자식 컴포넌트 간에 데이터를 공유하는 방법을 나타냅니다. 

 

이것은 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하면서 동시에 자식 컴포넌트에서 부모 컴포넌트로 데이터를 업데이트할 수 있는 것을 의미합니다.

 

리액트는 일반적으로 단방향 데이터 바인딩을 합니다.
사용자의 입력에 따라 데이터를 갱신해야 하기 때문에, 단방향 데이터 바인딩으로  구성하면, 데이터의 변화를 감지하고 업데이트 하는 이벤트 함수를 매번 작성해야 합니다.

 

 그러나 양방향 바인딩이 필요한 경우, 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 데이터를 전달하고, 자식 컴포넌트에서는 콜백 함수를 사용하여 데이터를 업데이트합니다.

간단한 예를 들어보겠습니다:

부모 컴포넌트:

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

function ParentComponent() {
  const [data, setData] = useState('');

  const handleDataChange = (newData) => {
    setData(newData);
  };

  return (
    <div>
      <ChildComponent data={data} onDataChange={handleDataChange} />
    </div>
  );
}

export default ParentComponent;

자식 컴포넌트

import React from 'react';

function ChildComponent({ data, onDataChange }) {
  const handleInputChange = (e) => {
    const newData = e.target.value;
    onDataChange(newData);
  };

  return (
    <div>
      <input type="text" value={data} onChange={handleInputChange} />
    </div>
  );
}

export default ChildComponent;

이 예에서는 'ParentComponent' 에서 'data' 상태를 정의하고, 이 데이터를 'ChildComponent'로 전달하며, 'ChildComponent'에서는 입력값이 변경될 때마다 'onDataChange' 콜백 함수를 호출하여 부모 컴포넌트의 데이터를 업데이트합니다.

 

하나의 예를 더 살펴보겠습니다.

위 코드는 사용자의 이름을 변경하는 코드입니다.

input 필드에 변화가 감지되면 handleChange 함수를 실행하고, event.target.value 값을 통해 playerName state를 업데이트 해줍니다.

그리고 다시 그 값을,  input필드의 value 값으로 사용함으로써, 양방향 바인딩이 이루어지는 것을 볼 수 있습니다.