양방향 바인딩은 무엇일까요?

양방향 바인딩은 무엇일까요? 양방향 바인딩을 사용하는 경우 리렌더링이 어떻게 이루어질 지 그려보세요.

(부모 컴포넌트 A와 자식 컴포넌트 B가 있음을 가정하고 그려봅시다.)

 

먼저 데이터 바인딩이란 무엇일까?

• 화면상에 보여지는 데이터와 브라우저 메모리에 있는 데이터를 묶어 서로간의 데이터를 동기화하는 것을 의미한다.
• HTML에서 서버 혹은 스크립트 상에서 받아온 데이터를 화면상에 그려주고 있을 때
  해당 값이 변경되면 HTML상의 데이터를 변경된 값에 맞춰 주는 동작을 데이터 바인딩이라 한다.

 

데이터 바인딩 예제

아래 예제는 works로 초기화된 값을 HTML에 출력하고,

추가하기 버튼을 누르면 State를 변경하여 HTML에서 데이터 바인딩을 하는 예시이다.

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

function App() {
  //works 객체 기본State생성
  const [works, setWorks] = useState([
    {
      id: 0,
      title: '리액트 공부하기',
      desc: '리액트 기초를 공부해봅시다.',
      isDone: false,
    },
  ]);
  //works 데이터 바인딩 버튼
  const addWorkHandler = () => {
    setWorks({
      id: 30,
      title: '리액트 어려워!',
      desc: '리액트는 어렵습니다',
      isDone: true,
    });
  };
  return (
    <div>
      <div>{works.title}</div>
      <div>{works.desc}</div>
      <button className="add-button" onClick={addWorkHandler}>
        추가하기
      </button>
    </div>
  );
}

export default App;

---

단방향 데이터 바인딩

⭐컴포넌트 내에서 단방향 데이터 바인딩은 JS(model)에서 HTML(view)로      한 방향으로만 데이터를 동기화하는 것을 의미한다.[JS(model) -> HTML(view)]

⭐HTML(view) --> JS(model)로의 직접적인 데이터 갱신은 불가하다.      위에서처럼 onClick 혹은 onChange 이벤트 함수를 지정하고, 호출한 뒤JS에서 HTML로 데이터를 변경해야한다.

⭐컴포넌트 간 단방향 데이터 바인딩은 부모 --> 자식 컴포넌트로만 데이터가 전달되는 구조이다.(props)

⭐대표적인 예로 React에서 단방향 데이터 바인딩을 합니다.

---

양방향 데이터 바인딩

 

⭐ 컴포넌트 내에서 양방향 데이터 바인딩은 JS와 HTML사이 ViewModel이 존재하여 하나로 binding되어       둘 중 하나라도 변경되면 함께 변경되는 것을 의미한다.

⭐ 부모 --> 자식 컴포넌트로 props를 통해 데이터를 전달하고, 자식 --> 부모 컴포넌트로 Emit을 통해 데이터를 전달한다.

⭐ 리액트에서는 부모의 상태를 바꿀 함수를 props로 내려줘야 변경이 가능 하지만,       Vue.js나 Angular에서는 부모-자식이 연결되어 변화를 감지하기 때문에 Emit이라는 이벤트를 통해 함수를 내려주지않아도      서로의 변화를 감지할 수 있는 기능이 존재한다.

⭐ 대표적으로 Vue.js / Angular에서 양방향 데이터 바인딩을 한다.

아직 양방향 데이터 바인딩을 하는 프레임 워크를 사용해 본 적이 없으므로, 이런게 있구나 정도만 알도록 하자.

---

---

 

[JS] 데이터 바인딩 이해하기(단방향, 양방향 데이터 바인딩)

 

[WEB] 양방향 단방향 데이터 바인딩

 

React로 사고하기 – React