제어되는 컴포넌트는 사용자 입력 값에 대한 처리를 개발자가 직접 제어하는 컴포넌트입니다. 이 컴포넌트를 사용하여 양방향 데이터 바인딩을 구현할 수 있습니다. 예를 들어, input 요소에 입력된 값과 상태 값을 동기화하는 방식으로 양방향 데이터 바인딩을 구현할 수 있습니다.

먼저, 리액트 컴포넌트의 상태를 정의합니다. 이 상태를 통해 입력된 값과 컴포넌트의 상태를 업데이트할 수 있습니다. 아래는 예시 코드입니다.

import React, { useState } from 'react';

function TwoWayBindingExample() {
  const [inputValue, setInputValue] = useState('');

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

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

export default TwoWayBindingExample;

위의 예시 코드에서는 상태를 관리하기 위해 useState 훅을 사용하였습니다. inputValue는 입력된 값의 상태를 나타내며, setInputValue 함수를 통해 상태를 업데이트할 수 있습니다.

<input> 요소에서는 value 속성에 inputValue 상태를 바인딩하고, onChange 이벤트에 handleChange 함수를 연결하여 사용자 입력 값이 변경될 때마다 상태 값을 업데이트합니다. 마지막으로, 상태 값을 출력하기 위해 <p> 요소를 사용하였습니다.

위의 예시 코드를 실행하면, 입력된 값과 상태 값이 실시간으로 동기화되어 양방향 데이터 바인딩이 구현됩니다.

이와 같이 리액트에서는 제어되는 컴포넌트와 상태를 활용하여 간단하게 양방향 데이터 바인딩을 구현할 수 있습니다. 이를 통해 사용자 입력 값과 컴포넌트의 상태 값을 쉽게 동기화할 수 있습니다.

#리액트 #데이터바인딩