[React] input tag의 조건에 따른 focus 이동 예제 관련 의문 사항 🤔(#useEffect, #onChange)

어떤 웹사이트에서 form을 입력할 때 입력이 모두 완료되면 자동으로 다음 입력해야 하는 빈칸으로 넘어가도록 구현된 웹사이트가 많다. id와 pw를 입력받을 때 id를 10자 이상 입력하면 pw 입력 칸으로 바로 넘어가는 기능을 구현하던 중 React의 배치 업데이트 특성을 잘 살려서 구현되었는지 의문이 들었다.

---

구현

위 gif 처럼 10개의 문자가 입력되면 곧바로 비밀번호 입력 칸으로 focus가 이동해야 함

 

App.js의 App() 컴포넌트에서 return 하는 input tag를 다음과 같이 구현할 수 있다.

function App() {
  ...
  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>
    </>
  );
}

id input tag에서 onChange 속성으로 onIdChangeHandler를 호출할 수 있고,  input tag에 ref 속성을 추가한다. 이 ref로 focus할 tag를 지정하게 된다.

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>
        아이디 : 
  ...
 }

onIdChangeHandler가 호출되면, setId(event.target.value)로 state 변경이 일어난다. 이때 state 변경으로 인한 리렌더링이 일어난다. 리렌더링 시 useEffect()가 실행되고, 조건에 부합할 경우 focus 이동이 일어난다(pwRef.current.focus()).

---

🤔

현재 코드에서는 useEffect() 내부에서 id의 length를 계산하여 조건을 검사한다. 조건 검사를 useEffect에서 하는 이유는 React의 배치 업데이트에 의한 효율성을 제고하기 위해서라고 한다.

내가 생각하기엔 onIdChangeHandler() 함수 내부에서 setId()로 state를 변경하기 전에 조건 검사를 해야, 불필요한 리렌더링이 일어나지 않을 것 같은데, 교재에서는 위와 같은 방식으로 가능하다고 한다.

---

관련하여 내일 좀 더 동기들과 얘길 나눠 봐야겠다.