[javascript] Knockout.js에서 데이터 필터링과 정렬하기

04 Dec 2023

javascript

Knockout.js는 JavaScript 기반의 클라이언트 측 MVVM (Model-View-ViewModel) 프레임워크입니다. 이 프레임워크를 사용하면 데이터 바인딩을 통해 화면의 요소들을 동적으로 업데이트할 수 있습니다. 이번 글에서는 Knockout.js를 사용하여 데이터를 필터링하고 정렬하는 방법에 대해 알아보겠습니다.

데이터 필터링

Knockout.js에서는 데이터 배열을 필터링하는 데 사용할 수 있는 ko.observableArray()와 같은 관찰 가능한 배열을 제공합니다. 이 배열에 데이터를 추가하거나 제거할 때, 자동으로 화면이 업데이트됩니다.

아래의 예제 코드는 간단한 할일 목록을 관리하는 데 사용되는 viewModel입니다.

function TodoViewModel() {
  var self = this;

  self.todos = ko.observableArray([
    { title: 'Task 1', completed: false },
    { title: 'Task 2', completed: true },
    { title: 'Task 3', completed: false }
  ]);

  self.filteredTodos = ko.computed(function() {
    return self.todos().filter(function(todo) {
      return !todo.completed;
    });
  });
}

filteredTodos는 todos 배열에서 완료되지 않은 항목들만 필터링한 결과를 반환합니다.

데이터 정렬

Knockout.js에서는 데이터 배열을 정렬하는 데 사용할 수 있는 ko.computed() 함수를 제공합니다. 이 함수를 사용하면 다양한 기준에 따라 데이터를 정렬할 수 있습니다.

아래의 예제 코드는 할일 목록을 우선순위에 따라 정렬하는 방법을 보여줍니다.

function TodoViewModel() {
  var self = this;

  self.todos = ko.observableArray([
    { title: 'Task 1', priority: 2 },
    { title: 'Task 2', priority: 1 },
    { title: 'Task 3', priority: 3 }
  ]);

  self.sortedTodos = ko.computed(function() {
    return self.todos().sort(function(a, b) {
      return a.priority - b.priority;
    });
  });
}

sortedTodos는 todos 배열을 우선순위에 따라 정렬한 결과를 반환합니다.

사용 예제

위에서 정의한 viewModel을 HTML과 연결하여 실제로 데이터를 필터링하고 정렬할 수 있습니다. 아래의 예제 코드는 필터링과 정렬을 위한 간단한 HTML 페이지입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Knockout.js Filter and Sort Example</title>
</head>
<body>
  <h1>Todo List</h1>

  <input type="checkbox" data-bind="checked: showCompleted">
  <span>Show Completed</span>

  <ul data-bind="foreach: filteredTodos">
    <li data-bind="text: title"></li>
  </ul>

  <h2>Sorted Todo List</h2>

  <ul data-bind="foreach: sortedTodos">
    <li data-bind="text: title"></li>
  </ul>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
  <script src="app.js"></script>
</body>
</html>

위의 코드에서 data-bind 속성을 사용하여 필터링과 정렬된 데이터를 표시합니다.

이제 Knockout.js를 사용하여 데이터를 필터링하고 정렬하는 방법에 대해 알아보았습니다. Knockout.js는 데이터 바인딩을 위해 강력한 기능을 제공하는 프레임워크이므로, 복잡한 화면 상태를 다룰 때 유용하게 사용할 수 있습니다.

더 자세한 내용은 Knockout.js 공식 문서를 참조하시기 바랍니다.