[용어 정리] 바인딩 (Binding)

방충림·2023년 3월 19일

CS

목록 보기

11/26

바인딩(binding)

컴퓨터 프로그래밍에서 각종 값들이 확정되어 더 이상 변경할 수 없는 구속(bind) 상태가 되는 것. 프로그램 내에서 변수, 배열, 라벨, 절차 등의 명칭, 즉 식별자(identifier)가 그 대상인 메모리 주소, 데이터형 또는 실제값으로 배정되는 것이 이에 해당되며, 원시 프로그램의 컴파일링 또는 링크 시에 확정되는 바인딩을 정적 바인딩(static binding)이라 하고, 프로그램의 실행되는 과정에서 바인딩되는 것을 동적 바인딩(dynamic binding)이라고 한다. 프로그래밍에서는 바인딩을 가급적 뒤로 미루도록 권고하고 있다.

바인딩 시점(Binding time)

소프트웨어의 설계로 부터 실제 수행까지의 전 과정에서 각종 변할 수 있는 값들이 최종적으로 고정되는 순간. 바인딩은 프로그램의 각종 변수값들이 실제 값으로 묶여 버리는 것으로, 개념적으로는 설계, 코딩, 컴파일, 실행, 번역, 언어의 구현, 정의 등 프로그래밍 전 과정에 걸쳐 일어나나 일반적으로는 컴파일 시간에 일어나는 정적 바인딩과, 실행 시간에 일어나는 동적 바인딩을 의미한다.

정적(static)바인딩, (=early 바인딩)

컴파일시 변수의 위치와 함수가 실행할 명령이 결정되는 경우
static 변수, overloading

동적(dynamic)바인딩, (=late 바인딩)

실제 실행알 때 (run time) 결정되는 경우
지역 변수, overriding

웹개발에서 말하는 바인딩

웹개발에서 바인딩(Binding)이란, 데이터를 특정 위치에 동적으로 연결하는 것을 의미한다.

이는 대개 템플릿 엔진을 사용하여 HTML, CSS 및 JavaScript와 같은 프론트엔드 코드에서 서버 측 데이터를 사용하도록 돕는 데 사용된다.

예시1

예를 들어, 웹페이지에서 사용자의 이름을 출력하려면, 서버 측에서 사용자의 이름을 가져와 해당 값을 HTML 코드에 동적으로 연결해야 합니다. 이때 바인딩을 사용하여 서버에서 가져온 사용자 이름 값을 HTML 코드에 동적으로 연결합니다.

간단한 바인딩 예시를 보겠습니다. 아래와 같은 HTML 코드가 있다고 가정해보겠습니다.

<div>
  <p>안녕하세요, <span id="name"></span>님!</p>
</div>

여기에서 id 속성이 name인 span 요소는 서버에서 가져온 사용자 이름 값과 동적으로 연결됩니다. 이를 위해 JavaScript를 사용하여 해당 span 요소를 선택하고, 서버에서 가져온 사용자 이름 값을 해당 span 요소에 할당합니다.

const nameSpan = document.querySelector('#name');
const userName = 'John'; // 서버에서 가져온 사용자 이름 값
nameSpan.textContent = userName;

이렇게 하면, span 요소에는 서버에서 가져온 사용자 이름 값이 동적으로 연결되어 출력됩니다. 이것이 바인딩의 개념입니다.

예시2

React.js에서 바인딩을 사용하면, 데이터와 뷰를 연결할 수 있습니다. React.js는 Virtual DOM을 사용하여 뷰를 관리하는데, 이 때 데이터를 바인딩하면 뷰가 자동으로 업데이트됩니다.

간단한 예로, 다음과 같은 코드가 있다고 가정해봅시다.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}