입력과 키맵
키보드로 배포 항목을 탐색하고 ? 도움말 오버레이를 추가하세요.
이 장의 내용
- `useInput`
- 키맵
- 도움말 오버레이
- 포커스
키 입력은 페이지의 숨겨진 입력 요소를 거쳐 앱에 전달되므로 페이지에 포커스가 있어야 해요. 모든 Text.js 앱이 먼저 페이지를 클릭하라고 요청하는 이유예요. 페이지에 포커스가 있으면 누르는 모든 키가 React에 전달돼요.
useInput
useInput은 지금까지 사용한 저수준 훅이에요. 정규화된 key("up", "return", "escape"), 입력한 문자가 담긴 input, 그리고 ctrl, alt, shift, meta가 포함된 KeyEvent를 받아요.
useInput((e) => { if (e.ctrl && e.key === "k") openPalette();});트리의 더 아래쪽 핸들러에 키가 전달되지 않도록 하려면 e.stopPropagation()을 호출하세요.
키맵
화면에서 사용하는 키가 두어 개를 넘으면 useKeymap으로 정의하세요. 바인딩은 문자열이에요. "up, k"는 두 키 중 하나, "g g"는 순차 입력, "ctrl+k"는 동시 입력을 뜻해요. 레이블이 있는 바인딩은 <KeyHelp>, <KeyHints>, 명령 팔레트에도 표시돼요.
추가: import { useState } from "react";추가: import { Box, KeyHelp, Text, useKeymap } from "@textjs/app";추가: import { DEPLOYMENTS } from "../../lib/deployments";추가: 추가: export default function DeploymentsPage() {추가: const [index, setIndex] = useState(0);추가: const [open, setOpen] = useState(false);추가: const move = (by: number) => setIndex((i) => Math.max(0, Math.min(DEPLOYMENTS.length - 1, i + by)));추가: 추가: useKeymap({추가: "up, k": { label: "Previous deployment", run: () => move(-1) },추가: "down, j": { label: "Next deployment", run: () => move(1) },추가: enter: { label: "Toggle details", run: () => setOpen((o) => !o) },추가: "g g": { label: "First deployment", run: () => setIndex(0) },추가: });추가: 추가: return (추가: <Box className="flex-row grow p-1 gap-2">추가: <Box className="flex-col grow">추가: {DEPLOYMENTS.map((d, i) => (추가: <Box key={d.id} className="flex-row h-1 gap-2 px-1" backgroundColor={i === index ? "selection" : undefined}>추가: <Text>{i === index ? "›" : " "}</Text>추가: <Text bold={i === index} wrap="truncate-end">{d.commit}</Text>추가: </Box>추가: ))}추가: </Box>추가: {open && <Details deployment={DEPLOYMENTS[index]} />}추가: <KeyHelp />추가: </Box>추가: );추가: }현재 DEPLOYMENTS는 lib/deployments.ts에 있는 일반 배열이에요. 6장에서는 라우트 핸들러를 거쳐 접근하도록 바꿔요.
도움말 오버레이
<KeyHelp />는 ? 입력을 감지하면 현재 활성화된 레이블이 있는 모든 바인딩을 그룹별로 나열하는 모달을 열어요. 콘솔에서 ?를 누른 다음, 닫으려면 ? 또는 q를 누르세요. 모달 안의 바인딩이 포커스를 가두므로 모달이 닫힐 때까지 아래 목록은 입력에 반응하지 않아요.
포커스
<Input>, <Select>, <Table> 같은 컴포넌트는 포커스가 있을 때만 키 입력을 받아요. Tab은 컴포넌트 사이에서 포커스를 이동하고, useFocus()와 useFocusManager()로 직접 포커스를 이동할 수도 있어요.
사용해 보기
이 장을 마쳤을 때의 Acme Deploys 앱이 DevTools에서 실행 중이에요. 패드를 클릭한 뒤 아래 키를 사용하세요.
콘솔 열기
앱은 DevTools에서 렌더링돼요.먼저 Safari 설정 → 고급에서 ‘웹 개발자용 기능 보기’를 켜세요. 그다음 여기를 클릭하고 ↓를 누르세요.
데스크톱에서 열기
이 앱은 DevTools 콘솔에서 렌더링되므로 데스크톱 브라우저가 필요해요.
퀴즈
질문 2개장을 완료하려면 모든 문제에 답하세요.