React란?

리액트는 FaceBook에서 만든 Javasript를 이용한 사용자 인터페이스이다.
사용자 인터페이스(UI) 개발에 초점을 맞춘 프론트엔드 라이브러리로 복잡하고 동적인 웹 페이지 개발 시 사용이 용이하여 플랫폼 개발에 많이 사용되는 프론트엔드 개발 도구 이다.

바인딩(Binding)

리액트 바인딩이란 두가지, 데이터 바인딩과 명시적 바인딩이 있다.

View(화면에서 보여지는 데이터)와 Model(브라우저 메모리에 있는 데이터)를 묶어서 서로 간의 데이터를 동기화하는 것을 의미한다.
즉 View에서 사용자의 조작으로 데이터가 변하면 Model의 데이터도 변화된 값으로 변경되는 것을 바인딩되었다고 한다.

장점으로는 개발자가 수동으로 DOM을 조작하여 뷰를 업데이트할 필요가 없다는 것이며, 이는 코드의 복잡성을 줄이고, 유지 보수를 더 쉽게 만드는 장점이 있다.
코드의 복잡성을 줄이고, 유지 보수를 더 쉽게 만들어 준다.

데이터 바인딩이란

데이터 바인딩은 두가지로 나누어 진다.

• 단방향 데이터 바인딩(One-Way Data Binding)
• 양방향 데이터 바인딩(Two-Way Data Binding)

단방향 데이터 바인딩(One-Way Data Binding)

• 데이터는 한 방향으로만 데이터를 동기화하는 것을 의미한다.
• 부모 컴포넌트에서 자식 컴포넌트로만 데이터가 전달되는 구조이다.
• View의 변경이 일어난다면 Model에 반영이 되지 않는다.

• 장단점
  • 모든 JS 코드가 데이터 관리에 집중, 일관된 데이터 로직
  • 성능 저하없는 단방향(부모 -> 자식) DOM 리렌터
  • HTML에 대한 입력 및 이벤트에 데이터 감지 및 리렌더 코드를 매번 작성

양방향 데이터 바인딩(Two-Way Data Binding)

• 둘 중 하나만 변경되어도 함께 변경되는 것을 의미한다.

• 모델의 변경이 뷰에 반영되고, 뷰의 변경도 모델에 반영된다. 즉 사용자 입력과 같은 뷰의 변경을 자동으로 모델에 업데이트하며, 모델의 변경도 뷰에 자동으로 반영

  

• 장단점

  • 코드가 단순해진다.
  • 역박향 변화 발생 시 DOM 전체 랜더링 전파에 따른 필요하여 성능 저하

명시적 바인딩이란

리액트 컴포넌트의 메소드가 this가 컴포넌트 인스턴스를 가리키도록 직접적으로 지정하는 것을 의미한다. 이를 통해 컴포넌트의 props나 state에 접근할 수 있게 된다.

• 장점
  • this가 무엇을 가리키는지 명확하게 이해할 수 있다.
• 단점
  • 각 메소드를 수동으로 바인딩하는 것은 번거롭다.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    // 명시적으로 메소드를 바인딩
    this.myMethod = this.myMethod.bind(this);
  }

  myMethod() {
    // 여기서 'this'는 MyComponent 인스턴스를 가리킵니다.
  }

  // ...
}

---

참조

• https://adjh54.tistory.com/49