React로 렌더링한 후 요소에 포커스를 설정하는 방법

개요

요소에 초점을 설정하여 사용자를 다음 예상 입력 필드로 부드럽게 안내하여 추측을 줄이면서 더 나은 검색 경험을 제공합니다.

이 기사에서는 React 애플리케이션 또는 React 구성 요소를 렌더링한 후 요소에 포커스를 설정하는 방법을 배웁니다.

기존 HTML에서는 다음을 사용하여 포커스할 요소를 설정하는 것이 쉬웠습니다. autofocus 속성 부울 속성이며 기본적으로 다음으로 설정되는 태그 false. 특정 입력 필드에 집중하도록 브라우저에 지시하고 사용자는 즉시 값 입력을 시작할 수 있습니다.

<form>
    <input type="text" autofocus> // Will focus
    <input type="text"> // Won't focus
</form>

이것은 React 애플리케이션에서도 작동할 것입니다. 그러나 더 많은 프로그래밍 방식의 제어로 렌더링한 후 요소에 초점을 맞추고 싶을 때 useEffect() 기능적 구성 요소를 연결하고 componentDidMount() 클래스 구성 요소의 수명 주기 메서드.

기능 구성 요소에서 렌더링 후 요소에 초점을 설정하는 방법

이전에는 React hooks가 도입되기 전에는 Functional 구성 요소로 이와 같은 작업을 처리할 수 없었습니다.

후크가 도입된 이후로 애플리케이션/컴포넌트가 완전히 렌더링된 시점을 알 수 있으므로 다음을 사용하여 특정 작업을 수행할 수 있습니다. useEffect() 훅. 우리는 또한 useRef() 특정 요소를 직접 참조하는 데 사용할 수 있는 hook.

두 개의 필드가 있는 양식이 있고 구성 요소가 렌더링된 후 필드 중 하나가 포커스에 설정되기를 원한다고 가정합니다.

const App = () => {
    return (
        <div className='container'>
            <form>
                <input type="text" placeholder='This has focus' />
                <input type="text" placeholder='No focus when we render' />
            </form>
        </div>
    )
}
export default App;

다음을 사용하여 입력에 대한 참조를 가져오는 것으로 시작해 보겠습니다. useRef() 반응 후크. 이렇게 하려면 먼저 useRef() React에서 생성 ref 기본적으로 값을 null로 설정한 다음 생성된 파일을 첨부합니다. ref 우리의 React 요소에 ref 속성:

import { useRef } from 'react';

const App = () => {
    const inputReference = useRef(null);

    return (
        <div className='container'>
            <form>
                <input type="text" ref={inputReference} placeholder='This has focus' />
                <input type="text" placeholder='No focus when we render' />
            </form>
        </div>
    )
}
export default App;

참고 : 포커스를 설정하려는 입력 요소 중 하나에만 생성된 참조를 첨부했습니다.

이제 사용을 진행해 보겠습니다. useEffect() 애플리케이션을 렌더링한 후 요소에 포커스를 추가하는 후크:

import { useRef, useEffect } from 'react'

const App = () => {
    const inputReference = useRef(null);

    useEffect(() => {
        
    }, [])

    return (
        <div className='container'>
            <form>
                <input type="text" ref={inputReference} placeholder='This has focus' />
                <input type="text" placeholder='No focus when we render' />
            </form>
        </div>
    )
}
export default App;

위의 코드에서 useEffect() 후크를 만든 다음 빈 종속성 배열([]) 구성 요소가 처음 마운트될 때만 실행되도록 합니다. 마지막으로 참조된 요소를 포커스로 만들기 위해 ref를 통해 ref에 액세스합니다. current 속성을 지정한 다음 첨부 focus() 방법:

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

이 시점에서 애플리케이션 또는 구성 요소가 렌더링될 때 참조된 요소에 자동으로 초점이 맞춰집니다.

import { useRef, useEffect } from 'react';

const App = () => {
    const inputReference = useRef(null);

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

    return (
        <div className='container'>
            <form>
                <input type="text" ref={inputReference} placeholder='This has focus' />
                <input type="text" placeholder='No focus when we render' />
            </form>
        </div>
    )
}
export default App;

클래스 구성 요소에서 렌더링 후 요소에 포커스를 설정하는 방법

지금까지 기능 구성 요소가 있는 요소에 포커스를 설정하는 방법을 살펴보았지만 기능 구성 요소에서만 작동하기 때문에 더 이상 후크를 사용하지 않기 때문에 클래스 구성 요소와 완전히 다른 구문입니다. 클래스 구성 요소에서 ref를 생성합니다. constructor() 방법과 활용 componentDidMount() 애플리케이션이 렌더링되면 참조된 요소를 포커스로 설정하는 메서드:

import React, { Component } from 'react';

export class App extends Component {
    constructor(props) {
        super(props);
        this.inputReference = React.createRef();
    }

    componentDidMount() {
        this.inputReference.current.focus();
    }

    render() {
        return (
            <div className='container'>
                <form>
                    <input type="text" ref={this.inputReference} placeholder='This has focus' />
                    <input type="text" placeholder='No focus when we render' />
                </form>
            </div>
        )
    }
}
export default App;

위의 코드에서 우리는 constructor() 입력 요소에 첨부한 참조를 만드는 방법:

constructor(props) {
    super(props);
    this.inputReference = React.createRef();
}

우리는 그 다음 사용했다 componentDidMount() 라이프 사이클 방식과 매우 유사합니다. useEffect() 후크를 사용하여 애플리케이션/컴포넌트가 렌더링되면 요소가 포커스에 설정되도록 합니다.

componentDidMount() {
    this.inputReference.current.focus();
}

결론

이 기사에서는 애플리케이션 또는 구성 요소가 클래스 및 기능 구성 요소 모두에서 렌더링되면 입력 필드를 사용하여 요소에 포커스를 설정하는 방법을 배웠습니다. 두 방법은 동일하지만 두 가지 유형의 구성 요소이기 때문에 구문이 다릅니다.