<리액트 기초> Ref와 포커싱

1. class 컴포넌트에서의 ref와 포커싱

* 함수 만들기

 - 기존에 포커싱을 줄 때 했었던 방식이다. 임의의 변수를 선언하고 그것을 함수에서 이용하여 포커스를 주는 방식이었다. 아래에서 다시 살펴보자.

 

// ...
// this.inputRef.focus();

inputRef;

onRefInput = (c) => { this.inputRef = c };

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

 

 - 임의로 만든 함수는 렌더링되는 포커싱이 필요한 태그에 ref에 넣어주고, 이를 불러올 때에는 this.inputRef.focus()와 같이 불러온다.

 

* createRef 사용하기

 - 아래에서 다뤄보겠지만 hooks에서는 useRef를 이용한다. 이는 위 보다 덜 복잡하지만 current가 위에서 추가된다. createRef를 사용하면 class 컴포넌트도 이와같이 작성이 가능하다.

 

import React, { Component, createRef } from 'react';

//...
// this.inputRef.current.focus()

inputRef = createRef();

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

 

 - inputRef에 createRef()를 넣어주기만 하면 이를 태그에 넣어줄 수 있다. 이를 불러올 때에는 this.inputRef.current.focus()와 같이 불러온다. 위의 코드보다 길어지긴 했지만 불필요한 한 줄을 줄일 수 있다. 특별하게 세밀한 함수의 조정이 필요하지 않다면 이렇게 쓰는 편이 좋을 것 같다.

 

2. Hooks에서의 ref와 포커싱

* useRef 사용하기

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

const Test = () => {
    const [test01, setTest01] = useState('');
    const [test02, setTest02] = useState('');
    const inputRef = useRef(null);
// ...
// inputRef.current.focus();
};
return (
    ...
    <input ref={inputRef}/>
);

 

 - hooks에서는 state를 선언할 때 함께 임의의 변수에 useRef를 할당시켜준다.

 

 - 포커싱이 필요한 태그에는 이 변수를 넣어주기만 하면되고, 불러올 때에는 .current.focus(); 를 사용해서 위에서 봤던것과 거의 동일하게 사용한다.

 

 

---

 

참고

 

 

 이 글은 ZeroCho 님의 리액트 무료 강좌를 수강하며 개인적으로 정리하며 쓰는 글입니다.

 

 

 

 

인프런

웹 게임을 만들며 배우는 React - 인프런

 

유튜브

리액트 무료 강좌(웹게임)