[React] useRef_DOM 요소 접근

useRef로 DOM 접근 (개념설명)

---

const ref = useRef(value);

ref = {current: value}

<input ref={ref}/>

useRef를 부르면 오브젝트를 부르게 되고 이 오브젝트를 접근하고자 하는 태그에 ref속성으로 넣어주면 해당 요소에 접근할 수 있다.

Ref를 사용하면 DOM요소에 쉽게 접근할 수 있고, Document.querySelector()와 유사하다.

 

예제 1

---

마운트 될  때 인풋에 자동으로 포커스 넣기

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

function App() {
    return (
        <>
            <UseRefDOM1 />
        </>
    );
}

const UseRefDOM1 = () => {
    const inputRef = useRef();

    useEffect(() => {
        console.log(inputRef);
    });

    return (
        <div>
            <input type="text" placeholder="username" />
            <button>로그인</button>
        </div>
    );
};


export default App;

useRef에 초기값을 넣어주지 않았기 때문에 current는 undefined로 나온다.

 

input요소를 current안에 넣어주려면 input태그 안에 ref속성을 넣어주면 된다.

<input ref={inputRef} type="text" placeholder="username" />

 

리프레시하면 자동으로 input에 포커싱되게 만들기

inputRef.current.focus();

위 코드를 추가하면 된다.

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

function App() {
    return (
        <>
            <UseRefDOM1 />
        </>
    );
}

const UseRefDOM1 = () => {
    const inputRef = useRef();

    useEffect(() => {
        // console.log(inputRef);
        inputRef.current.focus();
    });

    return (
        <div>
            <input ref={inputRef} type="text" placeholder="username" />
            <button>로그인</button>
        </div>
    );
};

export default App;

 

아쉬우니까 추가작업

리프레시하면 인풋에 포커스 → 입력후 로그인하면 얼럿창 → 얼럿창 닫으면 다시 인풋 포커스

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

function App() {
    return (
        <>
            <UseRefDOM1 />
        </>
    );
}

const UseRefDOM1 = () => {
    const inputRef = useRef();

    useEffect(() => {
        // console.log(inputRef);
        inputRef.current.focus();
    });

    const login = () => {
        alert(`환영합니다. ${inputRef.current.value}`);
        inputRef.current.focus();
    };

    return (
        <div>
            <input ref={inputRef} type="text" placeholder="username" />
            <button onClick={login}>로그인</button>
        </div>
    );
};

export default App;

 

useRef는 DOM요소 접근뿐만 아니라 효율적인 컴포넌트 렌더링과 변수관리에도 굉장히 효과적이다.

 

※ 이 글은 별코딩 리액트 훅 강의를 보고 정리한 글입니다.