본문 바로가기
잡(job)기술

Jetpack Compose에서 FocusRequester의 개념과 필요성, 사용 방법

by 무니이구나 2025. 5. 15.


Jetpack Compose의 `FocusRequester`는 컴포저블(TextField 등)에 **프로그래밍적으로 포커스를 요청**할 수 있도록 돕는 유틸리티이다. 이것은 사용자의 입력을 유도하거나 특정 UI 상태 변화에 따라 입력 필드에 자동으로 포커스를 주어야 할 때 유용하게 사용된다.

## 1. 개념

`FocusRequester`는 Compose의 포커스 시스템과 연결되어 있으며, 특정 컴포저블이 **포커스를 받을 수 있도록 요청(Request)** 하는 역할을 한다. 일반적으로 키보드 포커스를 유도하기 위해 사용되며, 다음과 같은 경우에 활용된다.

* 앱 시작 시 특정 TextField에 자동으로 포커스를 주고 싶을 때
* 버튼 클릭 후 입력 필드에 포커스를 주고 싶을 때
* 사용자의 행동에 따라 특정 요소에 포커스를 유도하고자 할 때

## 2. 필요성

Compose에서는 사용자 입력을 받기 위해 포커스 상태를 제어해야 하는 경우가 많다. 그러나 컴포저블에 포커스를 자동으로 주기 위한 API는 직접 요청하지 않으면 동작하지 않는다. 이때 `FocusRequester`를 사용하면 다음과 같은 효과를 얻을 수 있다.

* 사용자의 입력 흐름을 자연스럽게 유도
* 접근성 향상
* 동적인 UI 흐름 제어 가능 (예: 순차적인 입력 폼 작성 등)

## 3. 사용 방법

### 기본 예제

```kotlin
@Composable
fun FocusRequesterSample() {
    val focusRequester = remember { FocusRequester() }
    val coroutineScope = rememberCoroutineScope()

    Column(modifier = Modifier.padding(16.dp)) {
        TextField(
            value = "",
            onValueChange = {},
            modifier = Modifier
                .focusRequester(focusRequester)
                .focusable()
        )

        Spacer(modifier = Modifier.height(8.dp))

        Button(onClick = {
            coroutineScope.launch {
                focusRequester.requestFocus()
            }
        }) {
            Text("포커스 요청")
        }
    }
}
```

### 핵심 요소 설명

* `FocusRequester()`: 포커스를 요청할 수 있는 객체
* `Modifier.focusRequester(focusRequester)`: 포커스를 받을 대상 컴포저블에 이 Modifier를 연동한다.
* `Modifier.focusable()`: 해당 컴포저블이 포커스를 받을 수 있도록 만든다.
* `focusRequester.requestFocus()`: 포커스를 강제로 요청한다. 이 작업은 suspend 함수 내에서 실행되어야 하므로 `CoroutineScope`가 필요하다.

## 4. 주의 사항

* `requestFocus()`는 UI가 완전히 구성되기 전에 호출하면 무시될 수 있으므로, 보통 `LaunchedEffect`나 `CoroutineScope`를 통해 적절한 시점에 호출해야 한다.
* `focusable()`을 함께 사용해야 포커스가 정상적으로 작동한다.

## 5. 활용 예시

### 앱 시작 시 자동 포커스 주기

```kotlin
LaunchedEffect(Unit) {
    focusRequester.requestFocus()
}
```

### 조건부 포커스 이동

```kotlin
if (shouldFocusNext) {
    coroutineScope.launch {
        nextFocusRequester.requestFocus()
    }
}
```

---

FocusRequester는 사용자가 보다 직관적으로 앱을 사용할 수 있도록 돕는 중요한 컴포넌트이다. 적절하게 활용하여 UX를 개선할 수 있다.