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

🥞 이번 시간에는 useRef로 리액트에서 특정 DOM을 선택하는 방법에 대해서 알아보겠다.

 

HTML과 자바스크립트를 사용할 때에는 특정 DOM을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM 셀렉터 함수를 사용하여 DOM을 선택한다.

리액트에서도 가끔씩 DOM을 직접 선택해야하는 상황이 발생할 수 있다.

예를 들어, 특정 엘리먼트의 위치나 크기를 가져와야 한다던지 스크롤바 위치를 가져오거나 설정해야 한다던지, 포커스를 설정해주어야 한다던지 등 다양한 상황이 있다.

그럴때 리액트에서는 ref 라는 것을 사용한다.

 

🥞useRef라는 hook 사용하기

함수형 컴포넌트에서 ref를 사용하려면 useRef라는 hook을 사용한다.

그리고 클래스 컴포넌트에서는 React.createRef()라는 것을 사용한다.

지금 당장은 함수형 컴포넌트에서 ref를 사용하는 방법에 대해서만 알아보겠다.

 

지난 시간의 예제에서는 초기화 버튼을 누르면 포커스가 버튼에 맞춰져있다.

만약 초기화 버튼을 누르고 포커스가 이름 input에 가게 하고 싶다면 어떻게 해야할까?

이럴 땐 리액트 자체 기능으로는 할 수 있는게 없다. 그래서 어쩔 수 없이 DOM에 직접 접근을 해야 한다.

 

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

useRef를 불러온다.

 

const nameInput = useRef();

그리고 InputSample 컴포넌트 안에 위와 같은 코드를 작성한다.

작성하게 되면 nameInput이라는 객체가 만들어지게 되는데 이것을 우리가 선택하고 싶은 DOM 부분에 넣어준다.

 

 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>값: {name}({nickname})</div>

        </div>

    )

이렇게 첫번째 input에 ref를 넣어주었다.

 

const onReset = () => {

        setInputs({

            name: '',

            nickname: ''

        });

        nameInput.current.focus();

    }

onReset 함수에서 nameInput.current하면 current가 바로 그 돔을 가리키게 되는데,

DOM API를 사용하면 되는데 DOM API 중에서 focus()라는 함수를 호출하면 그 쪽에 focus가 잡힌다.