JSX, (단방향, 양방향) 바인딩

JSX

• JSX란, JS+XML을 뜻한다

  • Model + View가 있는 JSX를 만들면, Babel을 통해 Javascript로 Transfiling을 한다.
    

  • 특징

    • JSX는 무조건 하나의 요소로 반환되어야 한다.
      • <>든 뭐든 감싸자!
    • class는 ES6 문법이기에, className을 사용
    • JS로직을 사용하기 위해서는 {}를 감싸야한다.
    • Component가 JSX로 작성되면 첫 글자가 대문자여야 한다.

---

단방향 바인딩

MVC

기본적으로 React는 단방향 바인딩을 지원한다.

• Model: 데이터 (React에서는 상태 state에 해당됨)
• View: UI 화면
• Controller: 이벤트를 처리하고 상태를 변경하는 로직

Model(State)이 바뀌면 View에 자동으로 반영되고,
View에서 발생한 이벤트는 Controller로 전달되어 Model을 업데이트함.
데이터 흐름이 단방향으로 이루어지기 때문에 코드의 예측 가능성이 높고 관리가 용이함.

단방향 바인딩의 의미: 함수형 컴포넌트 그리고 Hook

바인딩이란 View와 Model을 싱크시키는 것임.
즉, “화면에 보이는 것(HTML)”과 “브라우저 메모리에 있는 데이터(JS)”를 일치시키는 것을 의미함.

• React는 과거에 클래스 컴포넌트를 주로 사용했지만, 이제는 함수 컴포넌트를 지배적으로 사용함.
  • 단방향 바인딩에 맞춰 Model → View를 함수 흐름으로 직관적으로 구분함.
    • 메서드 기반 대신 로직 기반으로, 위에서 아래로 흐름이 부드럽게 이어짐.
    • 불필요한 로직 및 보일러플레이트 코드 없음.
    • State와 Effect(Side-effect)를 분리하여 API 제공 → 생산성과 유지보수성이 높아짐.
  • Model을 변경하려면 View에서 Controller 역할을 하는 상태 변경 핸들러(setState)를 호출해 상태를 업데이트해야 함.

---

Model-View 바인딩 방식: 단방향 바인딩 vs 양방향 바인딩

바인딩: View와 Model을 싱크시키는 것
즉, “화면에 보이는 데이터”와 “브라우저 메모리에 있는 데이터”를 일치시키는 것을 의미함.

• View(HTML): “화면에 보이는 것, 화면”
• Model(JS): “브라우저 메모리에 있는 데이터”

단방향 바인딩: JS → HTML

컴포넌트에서 부모에서 자식으로 값이 한 방향으로만 전달되면 단방향 바인딩임.

• 장점:
  • Model과 View의 책임 분리가 명확하고, 일관된 데이터 로직을 유지할 수 있음.
  • 잘만 쓰면 성능 저하 없이 효율적인 DOM 리렌더링 가능.
• 단점:
  • 사용자 입력 및 이벤트 발생 시 매번 상태 변경 코드(SetState)를 작성해야 함.
  • 상태 관리가 제대로 안 되면 SetState 지옥에 빠질 수 있음.

---

양방향 바인딩: JS ↔ HTML

(MVVM)

컴포넌트에서 자식이 부모에게 값을 전달할 수 있는 구조면 양방향 바인딩임.

• 장점:
  • 코드가 간결해짐. 상태 변경 코드를 반복적으로 작성하지 않아도 됨.
• 단점:
  • 역방향 데이터 변화가 발생하면 DOM 전체를 다시 렌더링해야 할 수도 있어 성능 저하 가능성 있음.
• 심화:
  • Angular의 MVVM(Model-View-ViewModel) 개념과 비슷함.
  • Vue.js에서도 비슷한 방식으로 동작.