[React] (리액트 공부하기 17) useRef

useRef는 React에서 특정 DOM 요소에 직접 접근하거나 값을 유지하는 데 사용되는 훅이다.

1. useRef의 기본 개념

• useRef는 Ref 객체를 반환한다. 이 객체는 .current라는 속성을 가지고 있으며, DOM 요소 또는 임의의 값을 저장할 수 있다.
• Ref 객체는 컴포넌트가 다시 렌더링되어도 같은 객체를 유지한다.
• 기본 사용법:

const refContainer = useRef(initialValue);

• 여기서 initalValue는 초기값이다.
• .current 속성은 이 초기값으로 시작한다.

2. DOM 요소에 접근하기

아래 예제를 통해 DOM 요소에 접근하는 방법을 살펴본다.

import React, { useRef } from "react";

function TextInputWithFocusButton() {
    const inputRef = useRef(null); // Ref 객체 생성

    const onButtonClick = () => {
        // 버튼 클릭 시 input 요소에 포커스를 설정
        inputRef.current.focus();
    };

    return (
        <div>
            <input ref={inputRef} type="text" /> {/* ref를 input에 연결 */}
            <button onClick={onButtonClick}>Focus the input</button>
        </div>
    );
}

export default TextInputWithFocusButton;

• useRef로 DOM 요소 접근 과정:

1. useRef(null)로 Ref 객체를 생성한다.
2. ref={inputRef}로 input 요소에 Ref 객체를 연결한다.
3. 버튼을 클릭하면 inputRef.curren를 통해 해당 input 요소에 접근한다.
4. inputRef.current.focus()를 호출하여 input에 포커스를 설정한다.

3. Ref의 특징

1. 렌더링과 무관:

• Ref 값은 컴포넌트가 다시 렌더링되어도 유지된다.
• State와 다르게 Ref 값이 변경되어도 컴포넌트가 재렌더링되지 않는다.

2. DOM 노드에 접근:

• 특정 DOM 노드에 접근하고자 할 때 사용한다.