React의 단방향 데이터 바인딩

1. React의 단방향 데이터 바인딩
2. 단방향 데이터 바인딩과 React의 양방향 데이터 바인딩

현재 프런트 엔드 개발자는 웹 애플리케이션 구축을 위해 React, Vue 및 Angular JavaScript 프레임워크의 세 가지 선택을 할 수 있습니다. 이러한 프레임워크는 많은 유사점을 공유하지만 중요한 면에서도 다릅니다.

이 기사에서는 React의 단방향 데이터 바인딩에 대해 설명합니다. 이것은 React 웹 애플리케이션의 구조와 기능에 영향을 미치는 React 라이브러리의 특징 중 하나입니다.

React의 단방향 데이터 바인딩

다른 JavaScript 프레임워크와 달리 React에는 DOM 입력 요소의 값을 상태 변수와 연결하는 기능이 없습니다. 요소에 새 문자를 입력해도 상태 변수가 자동으로 업데이트되지 않습니다.

React 구성 요소의 구조는 일반적으로 동적 기능이 추가된 HTML과 유사한 구문이 있는 JSX로 작성됩니다.

사용자의 동작에 대한 응답으로 상태를 업데이트하려면 이벤트 핸들러를 정의하고 사용자의 동작에 대한 응답으로 이벤트 핸들러를 실행하도록 속성을 설정해야 합니다.

export default function App() {
  const [value, setValue] = useState("");
  return (
    <div className="App">
      <input type="text" onChange={(e) => setValue(e.target.value)} />
      <h2>{value}</h2>
    </div>
  );
}

이 예에서 사용자의 작업은 상태 변수를 업데이트하는 onChange 이벤트 핸들러를 트리거합니다. 그런 다음 이 값을 <h2> 태그로 표시할 수 있습니다.

단방향 데이터 바인딩과 React의 양방향 데이터 바인딩

양방향 데이터 바인딩이 있는 React, Angular 및 Vue 비교.

양방향 바인딩은 입력(DOM 요소)과 데이터 사이에 양방향 연결을 설정하여 한 항목이 업데이트될 때마다 다른 항목도 업데이트되는 것으로 생각할 수 있습니다.

예를 들어 Vue에서는 입력 요소의 값을 상태 값에 연결할 수 있습니다. 이를 변경하면 입력 요소의 값도 변경됩니다.

또한 입력 요소에 더 많은 문자를 입력하면 상태 값이 변경됩니다.

React에서는 입력 DOM 요소의 값과 상태 간의 직접적인 관계를 설정할 방법이 없습니다. 사용자의 새로운 입력을 감지할 때마다 상태를 업데이트하도록 이벤트 핸들러를 설정할 수 있습니다.

일반적으로 상태를 변경해도 <Input> 요소의 값은 변경되지 않습니다.

이 예를 살펴보겠습니다.

import "./styles.css";
import { useState } from "react";
export default function App() {
  const [value, setValue] = useState("");
  return (
    <div className="App">
      <input type="text" onChange={(e) => setValue(e.target.value)} />
      <h2>{value}</h2>
      <button onClick={() => setValue(value.concat(value))}>
        Double the Text
      </button>
    </div>
  );
}

여기에는 내부 값이 상태 변수에 연결되지 않은 <input> 요소가 있습니다. 그러나 사용자가 문자를 입력할 때마다 React는 이벤트 핸들러를 실행하고 상태 변수 value를 사용자 입력과 동일하게 설정합니다.

이는 상태 변수를 <h2> 헤더로 출력할 때 입증됩니다.

Double the Text라는 버튼도 있습니다. 이 버튼을 클릭하면 상태 변수를 추가하여 업데이트하는 다른 함수가 실행됩니다.

코드를 더 잘 이해하려면 이 CodeSandbox 데모로 이동하세요. 버튼을 사용하여 상태 값을 변경해도 입력 요소에는 영향을 주지 않습니다.

그 이유는 React는 입력 요소와 상태 변수 사이에 양방향 데이터 바인딩이 없기 때문입니다.