ReactJS에서 React Hooks와 Refs를 사용하여 Autofocus 설정하는 방법

ReactJS와 Autofocus: 문제 해결 가이드

ReactJS를 사용할 때 input 엘리먼트에 autofocus 속성을 설정하는 것은 때로는 약간 까다로울 수 있습니다. 이 문제 해결 가이드에서는 ReactJS 애플리케이션에서 autofocus를 올바르게 설정하는 다양한 접근 방법을 살펴보겠습니다. 특히 React Bootstrap Modal을 사용할 때에 대해서 다룰 것입니다.

옵션 1: useCallback()과 useRef() Hooks 사용하기

React Hooks를 사용하는 경우, autoFocus를 설정하기 위해 useCallback()과 useRef() hooks를 사용하는 방법이 있습니다.

import React, { useCallback, useRef } from 'react';

function InputComponent() {
    const autoFocusRef = useRef(null);
    const setAutoFocus = useCallback(el => el ? el.focus() : null, []);

    return <input type="text" ref={autoFocusRef} />
}

useCallback() hook을 사용하여 ref를 할당하는 방식으로 컴포넌트가 마운트될 때 input 엘리먼트에 초점을 맞출 수 있습니다.

옵션 2: Refs 사용하기

Hooks를 사용하기를 원하지 않는다면, 클래스 컴포넌트에서 refs를 사용하여 autofocus를 달성할 수 있습니다.

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.myRef = React.createRef();
    }
    
    componentDidMount() {
        this.myRef.current.focus();
    }
    
    render() {
        return <input type="text" ref={this.myRef} />;
    }
}

여기서는 React.createRef()를 사용하여 ref를 생성하고 input 엘리먼트에 할당합니다. autofocus는 componentDidMount() 라이프사이클 메서드에서 ref의 focus() 메서드를 호출하여 설정됩니다.

옵션 3: 사용자 정의 Auto Focus Hook 만들기

React Hooks를 사용하는 경우, autofocus 기능을 처리하기 위한 사용자 정의 hook을 만들 수도 있습니다.

import React, { useEffect, useState } from "react";

export const useAutoFocus = (inputId: string) => {
    const [initialized, setInitialized] = useState(false);
    useEffect(() => {
        if (!initialized) {
            document.getElementById(inputId).focus();
            setInitialized(true);
        }
    });
};

이 사용자 정의 hook을 사용하기 위해서는 input id를 매개변수로 전달하여 form 컴포넌트에서 호출하면 됩니다.

import { useAutoFocus } from "./useAutoFocus";

function MyFormComponent() {
    useAutoFocus("myInputId");
    
    return (
        <input type="text" id="myInputId" />
    );
}

결론

ReactJS 애플리케이션에서 autofocus 속성을 설정하는 것은 전통적인 JavaScript 애플리케이션과 비교했을 때 약간 다른 접근 방식을 요구할 수 있습니다. 제공된 옵션들을 활용하여 hooks, refs, 또는 사용자 정의 hook을 사용함으로써 ReactJS 컴포넌트에서 원하는 autofocus 기능을 손쉽게 구현할 수 있습니다.

다음에 ReactJS와 React Bootstrap Modal에서 autofocus에 문제가 발생할 때, 이 문제 해결 가이드를 참고하여 autofocus 속성을 올바르게 설정하고 모든 콘솔 경고를 제거하세요.

즐거운 코딩하세요!

참고 자료 : 

reactjs