AngularJS - 스코프 이해: 애플리케이션의 핀셋

안녕하세요, 미래의 AngularJS 마법사 여러분! 오늘 우리는 AngularJS 스코프의 세상으로 흥미로운 여정을 떠납니다. 프로그래밍 초보자라고 걱정하지 마세요 - 저는 친절한 안내자로서 모든 것을 단계별로 설명해 드릴 것입니다. 그러니 커피(또는 차, 당신의 취향에 따라)를 한 잔 마시고, 함께 뛰어들어 보겠습니다!

AngularJS - Scopes

AngularJS에서 스코프는 무엇인가요?

우선, AngularJS에서 스코프이 무엇인지 알아보겠습니다. 집을 짓는 것을 상상해 보세요. 스코프는 집의 기초와 같습니다. 모든 데이터와 함수가 살아 있는 곳이며, HTML(뷰)와 JavaScript(컨트롤러)를 연결하는 역할을 합니다.

간단한 예제를 보겠습니다:

<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{message}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.message = "Hello, AngularJS!";
});
</script>

이 예제에서 $scope는 우리의 스코프 객체입니다. message 속성을 설정하고, 그것을 HTML에서 {{message}}를 사용하여 표시합니다. 마법이죠?

스코프 상속

이제 좀 더 고급 내용에 대해 이야기해 보겠습니다 - 스코프 상속. 데이터의 가족 트리와 같은 것입니다!

스코프 상속이란?

AngularJS에서 스코프는 부모 스코프에서 상속할 수 있습니다. 자식이 부모에게 특성을 상속받는 것처럼, 현재 스코프에서 속성을 찾지 못하면 AngularJS는 부모 스코프에서 찾고, 조부모 스코프로 이어갑니다.

이를 실제로 보겠습니다:

<div ng-app="myApp" ng-controller="parentCtrl">
Parent: {{message}}
<div ng-controller="childCtrl">
Child: {{message}}
</div>
</div>

<script>
var app = angular.module('myApp', []);

app.controller('parentCtrl', function($scope) {
$scope.message = "I'm the parent!";
});

app.controller('childCtrl', function($scope) {
// Child scope inherits from parent
});
</script>

이 예제에서 부모와 자식 모두 "I'm the parent!"를 표시합니다. 자식 스코프는 부모 스코프에서 상속하기 때문입니다.

상속된 속성을 재정의

하지만 자식이 자신만의 메시지를 가지고 싶다면 어떻게 하나요? 문제ありません! 상속된 속성을 재정의할 수 있습니다:

<div ng-app="myApp" ng-controller="parentCtrl">
Parent: {{message}}
<div ng-controller="childCtrl">
Child: {{message}}
</div>
</div>

<script>
var app = angular.module('myApp', []);

app.controller('parentCtrl', function($scope) {
$scope.message = "I'm the parent!";
});

app.controller('childCtrl', function($scope) {
$scope.message = "I'm the child!";
});
</script>

이제 부모는 "I'm the parent!"를 말하고, 자식은 "I'm the child!"를 말합니다. 자식이 성공적으로 독립성을 주장했습니다!

스코프 가족 트리 예제

이제 이 모든 것을 더 복잡한 예제로 통합해 보겠습니다. 스코프의 가족 트리를 만들겠습니다:

<div ng-app="familyApp" ng-controller="grandparentCtrl">
Grandparent: {{message}}
<div ng-controller="parentCtrl">
Parent: {{message}}
<div ng-controller="childCtrl">
Child: {{message}}
<div ng-controller="grandchildCtrl">
Grandchild: {{message}}
</div>
</div>
</div>
</div>

<script>
var app = angular.module('familyApp', []);

app.controller('grandparentCtrl', function($scope) {
$scope.message = "I'm the grandparent!";
});

app.controller('parentCtrl', function($scope) {
// Inherits from grandparent
});

app.controller('childCtrl', function($scope) {
$scope.message = "I'm the child!";
});

app.controller('grandchildCtrl', function($scope) {
// Inherits from child
});
</script>

출력

이 코드를 실행하면 다음과 같이 보입니다:

Grandparent: I'm the grandparent!
Parent: I'm the grandparent!
Child: I'm the child!
Grandchild: I'm the child!

이를 설명하자면:

조부모는 초기 메시지를 설정합니다.
부모는 메시지를 설정하지 않기 때문에 조부모에서 상속합니다.
자식은 자신만의 메시지를 설정하여 상속을 재정의합니다.
손자는 메시지를 설정하지 않기 때문에 즉시 부모에서 상속합니다.

스코프 메서드

스코프는 데이터를 저장하는 것뿐만 아니라 메서드를 포함할 수도 있습니다! 다음은 몇 가지 일반적인 스코프 메서드입니다:

메서드	설명
$watch()	watched expression이 변경될 때 호출되는 리스너를 등록합니다
$apply()	수동으로 digest cycle을 시작합니다
$on()	이벤트 리스너를 등록합니다
$emit()	스코프 계층 상으로 이벤트를 전파합니다
$broadcast()	모든 자식 스코프로 이벤트를 전파합니다

$watch() 메서드의 예제를 보겠습니다:

<div ng-app="watchApp" ng-controller="watchCtrl">
<input ng-model="name">
<p>{{greeting}}</p>
</div>

<script>
var app = angular.module('watchApp', []);

app.controller('watchCtrl', function($scope) {
$scope.name = 'World';
$scope.greeting = 'Hello, ' + $scope.name + '!';

$scope.$watch('name', function(newValue, oldValue) {
$scope.greeting = 'Hello, ' + newValue + '!';
});
});
</script>

이 예제에서 우리는 $watch()를 사용하여 이름이 변경될 때마다 인사말을 업데이트합니다. 입력 필드에 글을 쓰면 인사말이 실시간으로 업데이트됩니다!

결론

이제 AngularJS 스코프에 대한 일瞥을 마쳤습니다! 우리는 스코프가 무엇인지, 상속하는 방법, 그리고 스코프 메서드와 같은 고급 개념에 대해 배웠습니다.

스코프는 AngularJS 애플리케이션을 연결하는 핀셋입니다. 데이터가 JavaScript에서 HTML로 흐르고, HTML에서 발생한 사용자 상호작용이 JavaScript를 업데이트하는 방법입니다.

AngularJS 여정을 계속하면서 스코프를 자주 사용하게 될 것입니다. 하지만 걱정하지 마세요 - 연습을 통해 자연스럽게 익숙해질 것입니다. 얼마 지나지 않아 스코프를 마법사처럼 다루게 될 것입니다!

계속 코딩하고, 배우고, 가장 중요한 것은 즐겁게 만들어 나가세요! AngularJS의 세상은 방대하고 흥미롭고, 당신은 이제 그 첫 걸음을 냈습니다. 다음 번에 다시 만날 때까지, 행복한 코딩 되세요!

Credits: Image by storyset