리액트에서의 ref (레퍼런스)사용법과 활용

리액트에서 ref는 DOM 요소나 React 컴포넌트에 대한 참조를 생성하고 관리하는 데 사용되는 특별한 속성입니다. ref를 사용하면 렌더링된 DOM 노드나 React 엘리먼트에 직접 접근할 수 있어 다양한 사용자 인터페이스(UI) 작업을 효율적으로 처리할 수 있습니다.

ref의 기본 개념

리액트에서 ref는 주로 다음과 같은 경우에 사용됩니다:

• 포커스 관리: 인풋 필드나 버튼에 포커스를 설정할 때
• 텍스트 선택 영역: 텍스트 입력을 할 때 특정 부분을 선택하거나 강조할 때
• 미디어 재생: <video>나 <audio> 요소에서 재생을 제어할 때
• 애니메이션 실행: 직접적인 애니메이션 실행이 필요할 때
• 서드 파티 라이브러리와 통합: React와 다른 DOM 라이브러리(예: D3.js)와 함께 사용할 때

ref 사용 방법

리액트에서 ref를 사용하는 방법은 크게 두 가지로 나눌 수 있습니다:

1. React.createRef() 사용 (추천)

React.createRef()는 React 16.3에 도입된 API로, 현재 권장되는 방법입니다. createRef()는 새로운 ref 객체를 생성하며, 이 객체는 React 컴포넌트에서 직접 DOM에 접근할 수 있도록 합니다.

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.myInput = React.createRef();
  }

  focusInput = () => {
    this.myInput.current.focus();
  };

  render() {
    return (
      <div>
        <input ref={this.myInput} type="text" />
        <button onClick={this.focusInput}>Focus Input</button>
      </div>
    );
  }
}

export default MyComponent;

위 예시에서 React.createRef()를 사용하여 myInput을 생성하고, 버튼 클릭 시 focusInput 메서드를 호출해 해당 input 요소에 포커스를 설정합니다.

 

2. 콜백 ref 사용

콜백 ref는 ref 속성에 함수를 전달하여 ref를 설정하는 방법입니다. 이 방법은 ref가 업데이트될 때마다 호출되는 특성을 가지고 있습니다. 콜백 함수는 해당 DOM 요소나 컴포넌트 인스턴스를 인자로 받으며, 다른 곳에서 접근할 수 있게 됩니다.

import React, { Component } from 'react';

class MyComponent extends Component {
  setInputRef = (input) => {
    this.inputElement = input;
  };

  focusInput = () => {
    if (this.inputElement) {
      this.inputElement.focus();
    }
  };

  render() {
    return (
      <div>
        <input ref={this.setInputRef} type="text" />
        <button onClick={this.focusInput}>Focus Input</button>
      </div>
    );
  }
}

export default MyComponent;

여기서 setInputRef 함수는 input 요소를 this.inputElement에 할당합니다. focusInput 메서드는 해당 요소에 접근해 포커스를 설정합니다.

 

콜백 ref vs React.createRef()

두 방법 모두 유용하지만, 대부분의 경우 React.createRef()를 사용하는 것이 더 간단하고 효율적입니다. 그러나 콜백 ref는 상태 업데이트에 따라 ref가 변경될 수 있기 때문에, 동적으로 ref를 처리해야 할 때 유용할 수 있습니다. 예를 들어, 조건부 렌더링에서 동적으로 요소를 참조해야 할 때 콜백 ref가 유리합니다.

성능 고려

콜백 ref의 경우, ref가 두 번 호출되는 문제가 발생할 수 있습니다. 초기에는 null로 호출되고, 그 후에 DOM 요소로 다시 호출되기 때문입니다. 이로 인해 성능에 민감한 작업에서는 사이드 이펙트가 발생할 수 있습니다. 하지만 대부분의 경우 성능에 큰 문제가 되지 않으며, 성능을 최적화할 필요가 있을 경우 React.createRef()를 사용하는 것이 더 나은 선택일 수 있습니다.

 

요약

리액트에서 ref는 DOM 요소나 컴포넌트에 직접 접근할 수 있게 해주는 중요한 기능입니다. 이를 통해 애니메이션, 미디어 제어, 포커스 설정 등 다양한 UI 작업을 효율적으로 처리할 수 있습니다. React.createRef()와 콜백 ref는 각각의 장단점이 있으며, 애플리케이션의 요구에 따라 적절한 방법을 선택하는 것이 중요합니다.