Enter시 초점 이동, 함수 실행

비니_ 2025. 9. 17. 14:18

728x90

CRUD란?

C 새로운 데이터 생성R 데이터 조회U 기존 데이터 수정D 데이터 삭제 C = Creat = POST R = Read = GET U = Update = PUT(전체 데이터 교체) / UPDATE(일부만 수정) D = Delete = DELETE 예시)POST /posts → 게시글 작성GET /p

dazzle-bini.tistory.com

👆이전 코드를 사용하여 코드 보완

+ 추가할 때 엔터시 가능, 이름 필드에서 엔터시 생일 필드로 초점 이동

import { useRef } from "react";

// 포커스 이동
const nameRef = useRef<HTMLInputElement>(null);
const birthRef = useRef<HTMLInputElement>(null);


<label htmlFor="inpName">이름</label>
<input
    type="text"
    id="inpName"
    placeholder="이름을 입력하세요"
    ref={nameRef}
    value={newName}
    onChange={e => setNewName(e.target.value)}
    onKeyDown={e => {
        if(e.key === "Enter") birthRef.current?.focus();
    }}
/>
<br />
<label htmlFor="inpBirth">생일</label>
<input
    type="text"
    id="inpBirth"
    placeholder="ex) 2000.01.01"
    ref={birthRef}
    value={newBirth}
    onChange={e => setNewBirth(e.target.value)}
    onKeyDown={e => {
        if(e.key === "Enter") addUser(); // 엔터시 추가 함수 호출
	}}
/>

💻 input에 ref 속성과 onKeyDown 속성 추가

const birthRef = useRef(null); 라고 써도 되지만 타입스크립트이기 때문에

const birthRef = useRef<HTMLInputElement>(null); 타입을 써준다.

728x90