FrontEnd/React

[react 간단 예시] input box에 focus 후 초기화 하는 방법 (리액트 ref 이용하기)

김평범님 2021. 9. 15. 22:17
반응형

react ref로 input focus

react Ref 이용하기

react에서 직접 DOM에 접근해서 작동시켜야하는 때가 있다.

오늘 가져온 경우는 input에 focus를 줘보는 예시를 만들어보았다.

react의 ref를 사용하면 컴포넌트 내부에 있는 DOM에 직접 접근을 할 수 있다.

 

 

예시 코드

가장 기본적인 App 컴포넌트를 하나 만들어주었다.

이름을 입력받을 input과 버튼을 클릭하면 input 내용을 초기화한 뒤 포커스를 해주는 버튼을 만들어 보도록 하겠다.

import {Component} from "react";

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name:'이름'
        }
    }
    inputFocus = () =>{
        this.setState({
            name : ''
        });
        this.nameInput.focus();
    };
    render() {
        return (
            <div>
                <input type="text"
                value={this.state.name}
                ref={(ref)=> this.nameInput = ref}/>
                <button onClick={this.inputFocus}>초기화</button>
            </div>
        )
    }
};

export default App;

위 예시 실행시 실제 화면

state 초기값 설정하기

constructor안에 state로 name이라는 변수에 이름이라는 초기 값을 설정해 주었다.

 

ref 사용하기

컴포넌트의 내부에 있는 input 박스에 접근하기 위해서는 ref를 설정해줘야한다.

ref사용방법은 콜백함수로 지정해줄 수 있다.

사용방법은 아래와 같다.

<input ref={(ref) => this.nameInput =ref}/>

ref 콜백함수 를 파라미터로 받아서 넣어주는데 this뒤에는 원하는 단어를 만들어주면된다.

나는 이름 input이기 때문에 nameInput을 사용해주었다.

 

ref 호출하기

button onClick 이벤트에 inputFocus함수를 호출하는 코드를 넣어주엇고

 inputFocus 함수에서는 클릭 시 name 필드의 vlaue 값을 초기화 시켜주고 

this.nameInput.focus()라는 코드를 넣어줘서

ref에서 설정한 nameInput을 이용해서 focus라는 Dom 컨트롤을 가능하도록 했다. 

 

 

실제 실행 화면

react ref로 focus 보내기

초기화 버튼을 누르면 지정한 ref에 필드가 focus가 되는 모습을 확인할 수 있다.

반응형