[React] useRef로 특정 DOM 선택하기

 

 

HTML/Javascript 환경에서는 특정 DOM을 선택할 때 getElementbyid나 query selector를 사용한다.

 

react를 사용할 때 특정 엘리먼트의 위치나 크기를  가져와야 한다 든지, 스크롤바 위치를 가져오거나 설정해야 한다 든지, 포커스를 설정해야 된다 든지 등 다양한 상황이 있다.

 

추가적으로 video.js 라이브러리나, d3, chart.js 등 그래픽 라이브러리를 사용할 때에도 특정 DOM에 라이브러리를 적용하기 때문에 DOM을 선택하는 상황이 발생할 수 있다.

 

이 때 react에서 ref라는 것을 사용한다.

함수형 컴포넌트에서는 useRef를 사용하고 클래스형 컴포넌트에서는 React.createRef()를 사용한다.

 

우선 이번 챕터에서는 함수형 컴포넌트인 useRef를 사용할 것이다.

 

해당 챕터는 이전 input 챕터의 소스를 활용하여 진행한다.

 

이전 여러 개의 input 상태 관리하기 소스를 적용하고 초기화를 누르면 포커스가 초기화에 있다.

초기화 시 포커스를 이름으로 옮기는 작업을 진행할 것이다.

 

이 작업을 하기 위해서는 DOM에 직접 접근하는 것이 필요하다.

 

해당 소스는 초기화 버튼을 클릭 후 이름 입력 input 박스에 다시 포커싱을 해주는 예시다.

소스 코드
import React, {useState, useRef} from 'react'; // useRef 사용

function InputSample() {
    const [inputs, setInputs] = useState({
        name : '',
        nickname: ''
    })
    // nameInput 선언
    const nameInput = useRef();

    const {name, nickname} = inputs;
    const onChange = (e) => {
        const {name, value} = e.target;
        const nextInputs = {
            ...inputs,
            [name] : value
        }
        setInputs(nextInputs);
    }
    const onReset = () => {
        setInputs({
            name:'',
            nickname:'',
        })
        // current가 해당 DOM을 가르킨다. 
        // DOM을 가져온 후 DOM API인 fucus를 사용한다. 
        nameInput.current.focus();
    }
    return (
        <div>
            <input name="name" placeholder="이름" onChange={onChange} value={name} ref={nameInput} />
            <input name="nickname" placeholder="닉네임" onChange={onChange} value={nickname} />
            <button onClick={onReset}>초기화</button>
            <div>
                <b>값 : </b>
                {name} {nickname}
            </div>
        </div>
    )
}

export default InputSample;

 

화면에서 초기화 버튼 클릭 시 포커스가 이름 input 박스로 이동하게 된다.