# 행 따라가기

행 hover는 포인터가 있는 행을 구분해 가로로 긴 표를 읽기 쉽게 합니다. 선택한 행과는 다른 상태이며 업무 처리 대상이 자동으로 선택되는 것은 아닙니다.

Canonical: https://grid.syidax.com/ko/docs/features/row-hover/

<a id="understand"></a>

## 동작 원리와 선택 기준

CSS만 필요한 경우 css-only, 앱에 행 진입·이탈 이벤트가 필요한 경우 stateful, 강조가 필요 없으면 off를 사용합니다. 이벤트가 필요 없을 때 상태 갱신 비용을 추가할 이유는 없습니다.

코드의 grid는 설치와 연결 장에서 준비한 Grid 요소입니다. 예제마다 필요한 데이터·설정을 확인하고, 코드에서 소개하는 앱 함수와 서버 주소는 프로젝트에 맞게 구현하세요.

- [설치와 연결 · 공통 예제 데이터](https://grid.syidax.com/ko/docs/guides/getting-started.md)

<a id="example-1"></a>

## 예제 1. 가벼운 시각 강조

기본적인 읽기 보조 효과를 선택합니다.

```javascript
grid.rowHover = 'css-only';
```

결과 확인: 마우스가 올라간 행의 강조만 바뀌고 앱의 행 hover 이벤트 처리에 의존하지 않습니다.

<a id="example-2"></a>

## 예제 2. 행 진입 이벤트 연결

앱의 보조 영역에서 포인터가 가리키는 행을 안내하는 상황입니다.

```javascript
grid.rowHover = 'stateful';
grid.addEventListener('rowHoverChanged', event => console.log(event.detail));
```

결과 확인: 이벤트의 행 정보를 사용할 수 있습니다. 행마다 서버를 호출하기보다 기존 데이터로 보조 설명을 구성하세요.

<a id="example-3"></a>

## 예제 3. 강조 끄기

색이 많은 분석 표에서는 hover 강조를 없애고 선택·포커스만 유지할 수 있습니다.

```javascript
grid.rowHover = 'off';
```

결과 확인: 행의 상태 색이나 조건부 서식이 포인터 때문에 계속 달라져 보이는 혼란을 줄일 수 있습니다.

<a id="pitfalls"></a>

## 조합할 때와 문제를 해결할 때

hover를 클릭·선택 이벤트로 대신 해석하지 마세요. 일괄 작업 대상은 실제 선택 API에서 읽습니다.

터치 화면에는 지속적인 hover가 없습니다. 필요한 정보와 조작은 클릭·포커스로도 접근할 수 있어야 합니다.

<a id="related-api"></a>

## 이 기능에 사용하는 API

- [rowHover](https://grid.syidax.com/ko/docs/options/rowHover.md) — CSS 강조만 사용하거나, 이벤트와 상태가 있는 hover를 사용하거나, hover를 끕니다.
- [setHoveredRow](https://grid.syidax.com/ko/docs/methods/setHoveredRow.md) — 상태형 hover의 대상 행을 지정합니다. 실제 행 선택을 바꾸는 API는 아닙니다.
- [getHoveredRowId](https://grid.syidax.com/ko/docs/methods/getHoveredRowId.md) — 현재 hover 행의 ID 또는 null을 읽습니다.
- [rowHoverChanged](https://grid.syidax.com/ko/docs/events/rowHoverChanged.md) — 상태형 hover 행이 바뀌었을 때 발생합니다. CSS 전용 hover와 달리 앱에서 상태를 읽을 수 있습니다.

<a id="next"></a>

## 함께 읽기

- [행·열·ID의 관계](https://grid.syidax.com/ko/docs/guides/concepts.md)
- [결과와 이벤트 연결](https://grid.syidax.com/ko/docs/guides/data-event-access.md)
- [Features에서 살펴보기](https://grid.syidax.com/grid/row-hover) — 직접 체험 가능한 범위는 해당 가이드에 안내되어 있습니다.