[React] ref란?

 

오늘은 ref에 대해 알아봅시다! 

 

1️⃣ ref의 기본 개념

 

ref(reference)는 특정 DOM 요소나 React 컴포넌트 인스턴스에 직접 접근하여 조작할 수 있도록 해주는 기능입니다. 

주로 사용되는 경우를 아래에서 알아볼까요!

 

1. DOM 요소 조작
   • 입력 필드에 자동으로 포커스 설정
   • 특정 요소의 스크롤 위치 조정
   • 애니메이션 직접 제어
2. 클래스형 컴포넌트 접근
   • 클래스형 컴포넌트의 메서드나 상태에 직접 접근
3. 렌더링 없이 값 저장
   • 상태(state) 변경 없이 컴포넌트 내부에서 값 유지

 

- ref의 장점

• 상태 업데이트 없이 요소를 조작할 수 있어 불필요한 리렌더링 방지
• useState와 달리 값이 변경되어도 컴포넌트가 다시 렌더링되지 않음

따라서, 상태(state) 변경이 불필요한 요소 조작이 필요한 경우 ref를 많이 활용하게 됩니다!

 

📌 ref를 사용하는 주요 이유 정리

1. DOM 요소 직접 조작 → document.querySelector() 없이 안전하게 DOM에 접근
2. 클래스형 컴포넌트 접근 → 부모 컴포넌트가 자식 컴포넌트의 메서드를 호출 가능
3. 렌더링 없이 값 저장 → useState 없이 변경 가능한 변수를 유지할 때 사용

---

 

2️⃣ ref의 기본 사용법

 

기본 개념을 익혔으니 이번에는 코드로 사용법을 알아볼까요!

 

1. DOM 요소에 ref 적용하기 (useRef 활용)

import { useRef } from "react";

function InputFocus() {
  const inputRef = useRef(null);

  const handleFocus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="여기에 입력하세요" />
      <button onClick={handleFocus}>포커스 이동</button>
    </div>
  );
}

 

✅ 코드 동작

• useRef(null)로 inputRef를 생성하고, input 요소에 ref로 설정합니다.
• 버튼 클릭 시 inputRef.current.focus()를 호출하여 input 요소에 포커스를 이동합니다.

 

---

2. 클래스형 컴포넌트에서 ref 사용하기 (createRef 활용)

import React, { Component, createRef } from "react";

class ChildComponent extends Component {
  showAlert() {
    alert("Hello from Child Component!");
  }
  render() {
    return <div>자식 컴포넌트입니다.</div>;
  }
}

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.childRef = createRef();
  }

  handleClick = () => {
    this.childRef.current.showAlert();
  };

  render() {
    return (
      <div>
        <ChildComponent ref={this.childRef} />
        <button onClick={this.handleClick}>자식 컴포넌트 메서드 호출</button>
      </div>
    );
  }
}

 

✅ 코드 동작

• createRef()로 this.childRef를 생성하고 ChildComponent에 ref로 설정합니다.
• 부모 컴포넌트에서 ref.current.showAlert()을 호출하여 자식 컴포넌트의 메서드를 실행할 수 있습니다.

 

---

3. 렌더링 없이 값 저장하기 (useRef 활용)

import { useRef } from "react";

function Counter() {
  const countRef = useRef(0);

  const increment = () => {
    countRef.current += 1;
    console.log("현재 값:", countRef.current);
  };

  return <button onClick={increment}>클릭하면 값 증가</button>;
}

 

✅ 코드 동작

• useRef(0)으로 countRef를 생성하면 current 값이 저장됩니다.
• countRef.current += 1을 실행해도 리렌더링되지 않으며, 상태값과 다르게 값이 유지됩니다.

 

---

 

이런 ref 함수가 React 19에서 변화가 좀 있었죠! 그 부분을 간단히 알아보고 가겠습니다!

3️⃣ React 19에서 ref 함수의 변화

 

1. 함수형 컴포넌트에서 ref를 props로 직접 전달이 가능해짐!!

🚀 변경 전 (React 18 이하) → React.forwardRef 필요

const MyInput = React.forwardRef((props, ref) => (
  <input {...props} ref={ref} />
));

 

🚀 변경 후 (React 19) → forwardRef 없이 props로 직접 전달 가능

function MyInput({ ref, ...props }) {
  return <input {...props} ref={ref} />;
}

 

forwardRef 없이 ref를 props로 전달할 수 있게 되었습니다!! 이 전 코드보다 훨씬 간단하면서 직관적으로 코드를 짤 수 있게 되었죠ㅎㅎ

 

 

2. ref 콜백 함수에서 정리(cleanup) 함수 반환 지원

🚀 변경 전 (React 18 이하) → 언마운트 시 null 호출

<input ref={(node) => { myRef = node; }} />

🚀 변경 후 (React 19) → 정리(cleanup) 함수 반환 가능

<input
  ref={(node) => {
    if (node) {
      node.style.backgroundColor = "yellow";
    }
    return () => {
      if (node) {
        node.style.backgroundColor = "transparent";
      }
    };
  }}
/>

 

ref 콜백에서 null을 호출하는 방식보다 정리(cleanup) 함수를 직접 제공하는 방식으로 바뀌었습니다! null을 호출하는 방식 보다 좀 더 직관적으로 느껴져서 좋다고 생각하는데 여러분은 어떠신가요? 언마운트 시의 정리 작업이 좀 더 쉬워진 것 같습니다!

 

---

 

4️⃣ 마무리 및 결론

ref는 React에서 직접적인 DOM 조작이나 값 저장, 컴포넌트 접근 등의 용도로 사용되며, 특히 불필요한 리렌더링 없이 특정 요소를 조작하는데 유용한 기능입니다.

 

React 19에서는 ref를 props로 직접 전달할 수 있도록 개선되었으며, ref 콜백에서 정리 함수를 반환할 수 있는 기능이 추가되었습니다!

 

 

 

 

 

 

썸네일