출처: spotlight
spotlight이란 무엇일까?
Spotlight is an extensible utility that enables users to navigate applications using a keyboard or television remote control.
Responding to input from the UP, DOWN, LEFT, RIGHT, and RETURN keys, Spotlight provides a navigation experience
👉 키보드나 TV 리모컨을 사용하는 사용자가 탐색(navigate)할 수 있도록 해준다.
spotlight/Spottable
In order to make a control focus-enabled (or “spottable”) with Spotlight, simply wrap your base control with the Spottable HOC, like so:
import Spottable from '@enact/spotlight/Spottable';
const SpottableComponent = Spottable('div');Higher-order component (HOC)
HOC는 컴포넌트를 추상화하여 재사용성과 확장성을 제공하는 component.
👉 “spottable”은 focus가 가능하도록 만들어 준다.
spotlight/SpotlightContainerDecorator
Constructs a higher-order component that allows Spotlight focus to be passed to its own configurable hierarchy of spottable child controls.
its own configurable hierarchy
"its own configurable hierarchy"는 개체가 자체적으로 구성 가능한 계층 구조를 가지고 있다는 의미로, 개체가 독립적으로 동작하며 필요에 따라 계층 구조를 조정할 수 있는 특징을 강조합니다.
👉 spottable을 사용하기 위해선 SpotlightContainerDecorator가 필요
Spotlight.focus([containerId/selector])
When an application loads, Spotlight will initially spot the first spottable control. If a control has been programmatically spotted via Spotlight.focus(element) immediately after being rendered, that control will be spotted instead.
