Colin's Blog
[javascript] 앵귤러의 디렉티브(Directive)와 바인딩(Binding)

앵귤러는 자바스크립트 기반의 프레임워크로, 디렉티브와 바인딩 기능을 제공하여 개발자가 웹 애플리케이션을 더 효율적으로 개발할 수 있도록 도와줍니다. 이번 포스트에서는 앵귤러의 디렉티브와 바인딩에 대해 알아보겠습니다.

디렉티브(Directive)

앵귤러 디렉티브는 HTML 태그의 동작을 변경하거나 확장할 수 있도록 하는 기능입니다. 앵귤러 디렉티브는 ng- 접두사를 사용하여 HTML 요소에 추가됩니다. 예를 들어, ng-app 디렉티브는 앵귤러 애플리케이션을 정의하고 초기화하는 역할을 합니다.


<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
</head>
<body>
    <div ng-controller="myController">
        <h1>{{ greeting }}</h1>
    </div>
</body>
</html>

위의 예제에서 ng-app 디렉티브는 “myApp”이라는 앵귤러 애플리케이션을 정의합니다. ng-controller 디렉티브는 이 애플리케이션에 “myController”라는 컨트롤러를 연결하고, 표현식을 통해 컨트롤러의 변수를 바인딩합니다.

바인딩(Binding)

앵귤러의 바인딩은 애플리케이션의 데이터와 뷰를 동기화하는 기능입니다. 바인딩을 사용하면 데이터의 변경이 자동으로 뷰에 반영되고, 뷰의 변경이 데이터에도 반영됩니다. 이를 통해 애플리케이션의 상태를 일관되게 유지하고 사용자와 상호작용할 수 있습니다.

앵귤러에서는 중괄호({{ }})를 사용한 보간 표현식을 통해 데이터를 바인딩합니다. 보간 표현식은 컨트롤러의 변수 값을 표시하거나 계산된 표현식을 표시하는 데 사용됩니다.


<div ng-controller="myController">
    <h1>{{ greeting }}</h1>
</div>

위의 예제에서 {{ greeting }}은 컨트롤러의 greeting 변수 값을 표시합니다. 이 변수의 값이 변경되면 자동으로 업데이트되어 뷰에 반영됩니다.

마무리

앵귤러의 디렉티브와 바인딩은 웹 애플리케이션 개발을 더욱 효율적으로 만들어줍니다. 디렉티브를 사용하여 HTML 요소를 확장하고, 바인딩을 통해 데이터와 뷰를 동기화하여 사용자와의 상호작용을 간편하게 만들 수 있습니다.

더 많은 디렉티브와 바인딩 기능을 알아보려면 앵귤러의 공식 문서를 참고해주세요.

© 2018 Colin. All rights reserved.