[React] useRef로 페이지 로딩 시 input에 자동 포커스(focus) 주기

안녕하세요. 

 

React로 폼(Form)을 만들다 보면, 사용자가 페이지에 접속했을 때 아이디(ID) 입력창이나 검색창에 바로 타이핑할 수 있도록 자동으로 포커스를 맞춰주고 싶을 때가 많습니다.

 

HTML에서는 <input autofocus /> 속성으로 간단하게 구현할 수 있지만, React에서는 컴포넌트의 생명주기와 DOM 접근을 관리해야 하므로 useRef 훅을 사용하는 것이 표준적인 방법입니다.

 

오늘은 useRef와 useEffect를 조합해 페이지 로드 시 input에 자동으로 포커스를 주는 간단한 예제를 알아보겠습니다.

 

 

 

예제

컴포넌트가 처음 화면에 나타났을 때 '아이디' input에 자동으로 포커스가 이동하는 예제 코드입니다

import React, { useRef, useEffect } from 'react';
import './App.css'; // 기본 스타일

function App() {
  // 1. input 요소를 참조(reference)하기 위한 ref 객체 생성
  //    초기값은 null로 설정합니다.
  const idInputRef = useRef(null);

  // 2. 컴포넌트가 처음 렌더링(마운트)된 후에 실행될 코드
  useEffect(() => {
    // 3. idInputRef.current가 null이 아닐 때 (즉, input이 렌더링되었을 때)
    if (idInputRef.current) {
      // idInputRef.current는 <input> DOM 요소를 직접 가리킵니다.
      // 이 DOM 요소의 내장 .focus() 메서드를 호출합니다.
      idInputRef.current.focus();
    }
  }, []); // 4. 의존성 배열을 '[]' (빈 배열)로 설정하여
          //    컴포넌트가 *맨 처음 렌더링될 때 딱 한 번만* 실행되도록 합니다.

  return (
    <div className="App">
      <header className="App-header">
        <h2>로그인</h2>
        <div style={{ margin: '10px' }}>
          <label htmlFor="id" style={{ marginRight: '10px' }}>
            아이디:
          </label>
          {/* 5. input 태그의 ref 속성에 우리가 만든 ref 객체를 연결합니다. */}
          <input type="text" id="id" ref={idInputRef} />
        </div>
        <div style={{ margin: '10px' }}>
          <label htmlFor="pw" style={{ marginRight: '10px' }}>
            비밀번호:
          </label>
          <input type="password" id="pw" />
        </div>
      </header>
    </div>
  );
}

export default App;

 

 

실행결과