Angular vs React | 동적 데이터 바인딩에 대해서

---

Angular의 {{  }}

• Interpolation은 보간이라고도 하며, 데이터를 바인딩 할 때 사용합니다.
• '{{  }}' 구문으로 동적으로 바인딩할 구문을 표현합니다.

// app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <h1>{{pageTitle}}</h1>
      <p>Welcome to {{frameworkName}}!</p>
    </div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  pageTitle: string = 'Angular Interpolation Example';
  frameworkName: string = 'Angular';
}

---

React의 {  }

• JSX (JavaScript XML)는 자바 스크립트의 확장 문법으로, React에서 사용되는 주요 문법입니다.
• JSX에서 중괄호 '{ }'를 사용해 JavaScript 표현식을 감싸는 것으로 동적 데이터 파인딩을 표현한다.
• JavaScript 표현식을 중괄호 '{ }' 안에 포함시키면 해당 부분을 동적으로 계산하고 표현한다.

import React from 'react';

const App = () => {
  const message = 'Hello, JSX!';

  return (
    <div>
      <h1>{message}</h1>
      <p>{2 + 2}</p>
    </div>
  );
};

export default App;