#01 리액트 숙련 : React Hooks 사용해서 input 태그 포커스 옮기기

728x90
반응형

#미션!

아이디가 10자리 입력되면 자동으로 비밀번호 필드로 이동하도록 코드를 짜보세요.


0. TIL

▶ useRef만 사용하면 가능하다고 생각했었는데, 딱 1번만 가능하고 새로고침을 하지 않으면 안 되었음.

useEffect와 useRef를 함께 써야하는 것을 알게 되었음.

 

▶<input>태그에 onChange 이벤트 부분에서 length를 구하는 것은 배치 업데이트와 관련됨!

이 부분은.. setId에 바로 반영이 되지 않고,

리랜더링이 끝나는 시점인 함수 끝나고 재호출되는 시점이였던거랑 유사한 것 같다..!


1. 내가 생각한 코드

import { useRef } from 'react';

function App() {
    const idRef = useRef('');
    const pwRef = useRef('');
    const cntRef = useRef(0);

    const onClickIdInput = () => {
        idRef.current.focus();
        cntRef.current++;

        if (cntRef.current === 10) {
            pwRef.current.focus();
        }
    };

    return (
        <>
            <div>
                id<input onChange={onClickIdInput} ref={idRef}></input>
                pw<input ref={pwRef}></input>
            </div>
        </>
    );
}

export default App;

▶useRef 훅만 사용했음

(1) id <input>태그에 onChange에 event에따라 cntRef가 +1 되도록 설정 : cntRef.current ++;  /  focus는 id <input>

(2) cntRef.current ===10  비밀번호에 focus가도록 pwRef.current.focus();

 

▶ (문제)

처음에만 잘 되고 두번째부터는 안됨... (새로고침을 해줘야함)

 

2. 강의 코드

import { useEffect, useRef, useState } from 'react';
import './App.css';

function App() {
    const idRef = useRef('');
    const pwRef = useRef('');

    const [id, setId] = useState('');

    const onIdChangeHandler = (event) => {
        setId(event.target.value);
    };

 
    useEffect(() => {
        idRef.current.focus();
    }, []);

 
    useEffect(() => {
        if (id.length >= 10) {
            pwRef.current.focus();
        }
    }, [id]);

    return (
        <>
            <div>
                아이디 :
                <input type="text" ref={idRef} value={id} onChange={onIdChangeHandler} />
            </div>
            <div>
                비밀번호 : <input type="password" ref={pwRef} />
            </div>
        </>
    );
}

export default App;

useEffect를 활용하기 (화면이 랜더링 될때, 어떤 작업이 하고싶다!)

▶ useEffect의 dependancy array =[id] --> id값이 바뀔때마다 실행

▶ useEffect 안에 id.length를 넣은 이유는 <input>에서 onChange 길이는 한 박자가 늦음..

(총 11자리 입력할때 포커스가 변경됨) --> 배치 업데이트여서! setId(event.target.value)는 바로 반영x

 

반응형