리액트 useRef(1) DOM 선택

useRef를 사용하면, 특정 DOM을 선택할 수 있다.

React에서 특정 DOM(Document Object Model)을 선택하고 싶을 때 useRef를 이용할 수 있습니다.

 

다음 예제에서는 리셋 버튼을 누르면 포커스가 이름 input으로 이동하도록 할 것입니다.

 

1) 객체 생성

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

function Func(){
    //선언
    const [inputs, setInputs]=useState({
        nickname : '',
        name : ''
    });
    //값 추출
    const {name,nickname} = inputs;

    //ref 선언
    const nameInput = useRef();

nameInput이라는 ref 객체를 생성합니다.

 

2)  기능 부여

    //입력값 출력
    const onChange = (e)=>{
        const {value,name} = e.target; //타겟의 name과 value 가져오기
        // console.log(value + " " +name);
        setInputs({
            ...inputs, //state의 inputs 객체 복사
            [name]:value //name => value로 변경
        });
    }
    //입력값 리셋
    const onReset = ()=>{
        setInputs({
            name:'',
            nickname:''
        });
        //리셋 후 커서 위치 조정
        nameInput.current.focus();
    }

onReset의 마지막 부분에서

nameInput.current를 통해 DOM에 접근합니다. 

focus()를 통해 커서를 nameInput으로 이동시킵니다.

 

3) ref 지정

    return (
        <div className="func">
            <input name="name" placeholder="이름" onChange={onChange} value={name} 
             ref={nameInput}
            />
            <input name="nickname" placeholder="닉네임" onChange={onChange} value={nickname}/>
            <div className="print">
                <span>이름 : {name}</span>
                <p/>
                <span>닉네임 : {nickname}</span>
            </div>
            <button onClick={onReset}>초기화</button>
        </div>
    );
}

export default Func;

이름 input에 ref를 nameInput으로 지정합니다.

 

4) 실행 결과

 

초기화 버튼을 누르면 이름 input으로 커서가 이동된다.

 

useRef를 통해 DOM을 선택하는 방법을 배웠습니다.

useRef는 이 밖에 컴포넌트 내에서 변수 관리의 기능이 있는데 이는 다음 게시글에서 알아보겠습니다.