필터 구성요소는 커스텀 빌드된 데이터 애플리케이션 및 맞춤설정된 삽입 Looker 대시보드에 Looker의 풍부한 필터 기능을 제공합니다. 개발자는 SDK 또는 확장 프로그램을 통해 Looker API를 사용해 특정 대시보드의 JSON을 가져와 애플리케이션에 필터 구성요소를 포함하고 대시보드에서 각 필터의 속성을 전달할 수 있습니다. 그런 다음 구성요소가 필드와 저장된 UI 구성에 따라 각 필터를 렌더링합니다.
필터 구성요소를 사용하면 개발자 시간을 확보하고 Looker에서 작업하는 분석가가 견고하고 맞춤설정 가능한 사용자 환경을 빌드하고 유지관리할 수 있습니다. Looker 필터 구성요소는 다음과 같은 이점을 제공합니다.
고품질 필터 환경 - 필터 구성요소는 필요한 필터 유형에 가장 적합한 Looker의 풍부한 필터 로직과 다양한 필터 컨트롤을 제공합니다.
개발 속도 향상 — 필터 구성요소를 사용하면 필터에 '즉시' 액세스할 수 있으므로 개발자가 다른 작업에 집중하고 전반적인 개발 속도를 높일 수 있습니다.
맞춤설정 — 필터 컨트롤은 애플리케이션, 확장 프로그램 또는 삽입된 대시보드의 디자인과 분위기에 맞게 맞춤설정할 수 있습니다. 개발자는 필터 구성요소를 사용하여 그 어느 때보다도 더 많은 맞춤설정을 제공할 수 있습니다.
Looker 대시보드에 연결 — 필터 구성요소는 Looker 대시보드에서 필터에 직접 연결할 수 있으며, 해당 필터 버전은 Looker 애플리케이션, 확장 프로그램 또는 구성요소를 사용하는 삽입에서 렌더링됩니다. 필터 구성요소에 연결된 Looker 대시보드에 대한 수정 액세스 권한이 있는 모든 사용자는 Looker 대시보드에서 필터를 수정할 수 있으며, 이를 통해 애플리케이션, 확장 프로그램, 삽입에서 필터가 업데이트됩니다. 따라서 비즈니스상 필터를 조정해야 할 때마다 개발자가 반드시 필요한 것은 아니므로 개발자 시간이 절약됩니다.
Looker 모델과 연결 — 필터 구성요소는 빌드된 Looker 모델의 변경사항을 인식합니다. 즉, 필터 필드 및 기타 옵션이 동적이며 기본 모델 업데이트와 함께 업데이트됩니다.
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["이해하기 어려움","hardToUnderstand","thumb-down"],["잘못된 정보 또는 샘플 코드","incorrectInformationOrSampleCode","thumb-down"],["필요한 정보/샘플이 없음","missingTheInformationSamplesINeed","thumb-down"],["번역 문제","translationIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2025-07-31(UTC)"],[],[],null,["# Looker filter components\n\n\u003e Looker filter components provide Looker's rich filter functionality for custom data applications that are built on top of Looker.\n\nLooker components\n-----------------\n\n[Looker components](/looker/docs/components-getting-started) are React-based, prebuilt pieces of Looker's application. Application developers can use components in data applications and extensions that are built on top of Looker.\n\nComponents can be used with the [Looker extension framework](/looker/docs/extension-framework) and [Looker's Embed SDK](/looker/docs/embed-sdk).\n\nLooker filter components\n------------------------\n\nFilter components provide Looker's rich filter functionality for custom-built data applications and customized embedded Looker dashboards. Using the Looker API (through an [SDK](/looker/docs/embed-sdk) or [Extension](/looker/docs/extension-framework)) to fetch JSON for a given dashboard, developers can include the filter component in their application and pass in the properties of each filter in the dashboard. The component will then render each filter according to its field and stored UI configuration.\n\nThe filter components package offers 12 types of filter controls, similar to the controls [available for Looker's own dashboards](/looker/docs/filters-user-defined-dashboards#dashboard_filter_controls): \n- Button group\n- Checkbox\n- Tag list\n- Range slider\n- Button toggle\n- Radio button \n- Drop-down menu\n- Slider\n- Single day\n- Date range\n- Timeframe\n- Advanced\n\nFilter components are delivered through two packages that work together: [`@looker/filter-components`](https://github.com/looker-open-source/components/tree/main/packages/filter-components#readme) and [`@looker/filter-expressions`](https://github.com/looker-open-source/components/tree/main/packages/filter-expressions#readme). The `@looker/filter-components` package renders a filter component by using [a field, a filter type, and current filter expressions](https://github.com/looker-open-source/components/blob/main/packages/filter-components/USAGE.md#filter), which are available from any dashboard filter. The `@looker/filter-expressions` package transforms filter expressions into data structures that can be used by `@looker/filter-components`.\n\nWhy use filter components?\n--------------------------\n\nFilter components free up developer time and allow analysts who are working in Looker to build and maintain robust, customizable user experiences. Looker filter components provide the following benefits:\n\n- **High-quality filter experiences** --- Filter components provide Looker's rich filter logic and a wide range of filter controls to best fit the types of filters you need.\n- **Speed development** --- Filter components provide \"out-of-the-box\" access to filters, allowing developers to focus on other tasks and speeding overall development.\n- **Customization** --- Filter controls can be customized to the look and feel of your application, extension, or embedded dashboard. Developers can use filter components to provide more customization than ever before.\n- **Linked to Looker dashboards** --- A filter component can be connected directly to a filter on a Looker dashboard, and a version of that filter will be rendered in the Looker application, extension, or embed that is using the component. Any user who has edit access to the Looker dashboard that is connected to the filter component can edit the filter on the Looker dashboard, which updates the filter in the application, extension, or embed. This frees up developer time because a developer is not required every time there is a business reason to adjust a filter.\n- **Tied to the Looker model** --- Filter components are aware of changes to the Looker model on which they are built, which means filter fields and other options are dynamic and will update along with updates to the underlying model.\n\nInstalling and using filter components\n--------------------------------------\n\nDownload the [`@looker/filter-components`](https://www.npmjs.com/package/@looker/filter-components) and [`@looker/filter-expressions`](https://www.npmjs.com/package/@looker/filter-expressions) packages from the `@looker/components` NPM repository.\n\nInformation on installing and using the filter components packages can be found in the README document for each package, available in NPM or [GitHub](https://github.com/looker-open-source/components/tree/main/packages/filter-components).\n\nA [filter components demo application](https://github.com/looker-open-source/components/tree/%40looker/components%403.0.8/apps/filter-demo) is available on GitHub. Instructions for using the demo appear in its README document."]]
