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

#미션!

아이디가 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