[React] useRef (ref로 DOM 노드 가져오기)

 

 

 

---

목차

 

1. ref prop

2. useRef

3. 예제

---

 

 

 

1. ref prop

---

JavaScript 를 사용 할 때는 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택한다. 리액트를 사용하는 프로젝트에서도 DOM을 직접 선택해야 하는 상황이 발생하는데 이 때 ref라는 것을 이용한다.

 

사용 예시는 크게 두 가지로 나눌 수 있다.

1. DOM 요소 참조
useRef를 통해 특정 DOM 요소를 참조하여 직접 제어할 수 있다.

2. 변수 참조
useRef를 통해 변수의 값을 렌더링 사이클과 관계없이 저장하고 관리할 수 있다. 이렇게 하면 렌더링이 발생해도 값은 그대로 유지되고 값의 변경이 컴포넌트의 리렌더링을 유발하지 않는다.

 

 

 

2. useRef

---

ref prop 에는 React API를 이용해서 생성한 current 속성을 갖는 특정 형태의 객체만을 할당할 수 있다. 클래스 기반 컴포넌트를 에서는 React.createRef() 함수를, 함수형 컴포넌트에서는 useRef() 훅(hook) 함수를 사용하여 이 객체를 생성할 수 있다.

 

 

 

3. 예제-input focus 하기

---

설명만으로는 감이 오지 않기 때문에 예제를 보면서 살펴보자.

 

 ref prop은 여러가지 HTML 엘리먼트 중에서도 <input>을 제어할 때 많이 사용된다.

 

최신 웹사이트들을 보면 로그인 화면에 들어가자마자 아이디 input에 포커스되어있는 경우가 대부분이다.

이를 useRef를 통해 DOM요소를 선택하여 구현할 수 있다.

 

예제로 버튼을 클릭했을 때, 비활성화(disabled)되어 있던 입력란을 활성화시키며 포커스(focus)를 이동시키는 React 컴포넌트를 작성해보았다.

 

import React, { useRef } from 'react';

function FocusInput() {
    // inputRef 생성
    const inputRef = useRef(null);

    // 버튼을 클릭하면 입력 요소 활성화
    const handleFocus = () => {
        if (inputRef.current) {
            inputRef.current.focus();
        }
    };

    return (
        <div>
            {/* inputRef를 input 요소에 연결 */}
            <input type="text" ref={inputRef} />
            <button onClick={handleFocus}>활성화</button>
        </div>
    );
}

export default FocusInput;

useRef() 훅(hook) 함수를 사용하여 inputRef 객체를 생성한 후, <input> 엘리먼트의 ref prop에 넘겼다. 

이렇게 해주면 inputRef 객체의 current 속성에는 <input> 엘리먼트의 레퍼런스가 저장된다. 따라서 <button> 엘리먼트의 클릭(click) 이벤트 핸들러에서는 inputRef.current로 간단하게 <input> 엘리먼트를 제어할 수 있다.

 

 

- if (inputRef.current) 를 해주는 이유
inputRef.current가 null이 아닌 경우에만 안전하게 DOM 요소에 접근하기 위해서이다.

 

 

 

3. 예제-audio 엘리먼트 제어

---

ref prop이 사용되는 또 다른 사례로 audio 엘리먼트 제어를 들 수 있다. 예시로 음악 파일의 재생하거나 중지할 수 있는 컴포넌트를 작성해보았다.

 

import React, { useRef } from "react";
import music from "./music.mp3";

function Player() {
  const audioRef = useRef(null);

  const handlePlay = () => {
    audioRef.current.play();
  };

  const handlePause = () => {
    audioRef.current.pause();
  };

  return (
    <>
      <figure>
        <figcaption>Eyes on You (Sting) - Network 415:</figcaption>
        <audio src={music} ref={audioRef}>
          Your browser does not support the
          <code>audio</code> element.
        </audio>
      </figure>
      <button onClick={handlePlay}>재생</button>
      <button onClick={handlePause}>중지</button>
    </>
  );
}

useRef() 훅(hook) 함수로 audioRef 객체를 생성한 후, <audio> 엘리먼트의 ref prop에 설정해주었다. 따라서 이벤트 핸들러 함수 내에서는 audioRef.current를 통해 <audio> 엘리먼트의 play()와 pause() 함수를 호출할 수 있다.

 

 

 

 

4. useRef와 useState의 차이

---

아래는 useRef와 useState의 차이를 비교한 표이다.

 

특징	useRef	useState
반환 값	useRef(initialValue)는 { current: initialValue }을 반환한다.	useState(initialValue)는 상태 변수의 현재 값과 상태 설정 함수([value, setValue])를 반환한다.
리렌더링	값이 변경되더라도 리렌더링 되지 않는다.	값이 변경되면 리렌더링된다.
가변성	가변적이며, 렌더링 프로세스 외부에서 current의 값을 수정할 수 있다.	불변적이며, 상태 변수를 수정하려면 상태 설정 함수(setValue)를 사용해야 한다.
렌더링 중 사용	렌더링 중에 current 값을 읽거나 쓰지 않아야 한다.	언제든지 상태를 읽을 수 있다. 각 렌더링은 변경되지 않는 상태의 스냅샷을 가진다.

 

 

중요한 점은 ref는 state 변수와 달리 값이 변경되도 리렌더링이 되지 않는다.

따라서 값에 따라 컴포넌트의 상태를 업데이트 해야 하는경우에는 state를 사용해야 한다.