양방향 바인딩(Two-way data binding)

1. 양방향 바인딩?

양방향 데이터 바인딩(two-way data binding)은 UI와 데이터 사이의 양방향 연동을 의미합니다. 즉, UI에서 데이터를 변경하면 데이터 모델이 자동으로 갱신되고, 데이터 모델에서 변경이 발생하면 UI가 자동으로 업데이트됩니다.

2. 리액트에서의 양방향 바인딩

리액트는 기본적으로 단방향 데이터 흐름(one-way data flow)을 가집니다. 따라서, 리액트에서 직접적인 양방향 바인딩은 지원하지 않습니다. 그러나, 상태와 이벤트 핸들러를 조합하여 양방향 바인딩과 유사한 효과를 얻을 수 있습니다.

3. 리액트에서의 양방향 바인딩 예

import React, { useState } from 'react';

function App() {
  const [text, setText] = useState('');

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

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
      <p>입력한 텍스트: {text}</p>
    </div>
  );
}

export default App;

4. 요약

리액트에서는 양방향 바인딩을 기본적으로 제공하지 않지만, 상태와 이벤트 핸들러를 활용하여 양방향 바인딩과 유사한 효과를 얻을 수 있습니다. 이를 통해 UI와 데이터 사이의 일관성을 유지할 수 있습니다.