[React다루는기술] 07. Ref

in React on React 다루는 기술


리액트 컴포넌트 내에서도 id를 사용은 가능하나 컴포넌트를 여러번 재활용시에 id는 유니크 해야되는데 DOM내에 여러개가 생겨 문제가 생긴다. 그래서 리액트에서는 컴포넌트 내에서만 동작하는 ref 기능을 사용한다.


ref는 리액트에서 DOM 요소나 클래스 컴포넌트에 직접적으로 접근할 수 있게 해주는 기능이다. ref를 사용하면 DOM 요소에 직접 접근하여 값을 읽거나 변경하거나, 클래스 컴포넌트의 메서드를 호출할 수 있다. 리액트 문서도 확인해보자. [forwarding-refs]


1. 함수 컴포넌트에서의 ref 사용

useRef 훅을 사용하여 함수 컴포넌트에서 ref 사용


import React, { useRef } from 'react';

const RefExample = () => {
  // ref 생성
  const inputRef = useRef(null);

  // 버튼 클릭 시 input 요소에 포커스를 주는 함수
  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      {/* ref를 input 요소에 연결 */}
      <input type="text" ref={inputRef} />

      {/* 버튼을 클릭하면 input 요소에 포커스가 감 */}
      <button onClick={focusInput}>포커스 주기</button>
    </div>
  );
};

export default RefExample;



2. 클래스 컴포넌트에서의 ref 사용

React.createRef()를 사용하여 클래스 컴포넌트에서 ref 사용


import React, { Component } from 'react';

class RefExampleClass extends Component {
  constructor(props) {
    super(props);

    // ref 생성
    this.inputRef = React.createRef();
  }

  // 버튼 클릭 시 input 요소에 포커스를 주는 메서드
  focusInput = () => {
    this.inputRef.current.focus();
  };

  render() {
    return (
      <div>
        {/* ref를 input 요소에 연결 */}
        <input type="text" ref={this.inputRef} />

        {/* 버튼을 클릭하면 input 요소에 포커스가 감 */}
        <button onClick={this.focusInput}>포커스 주기</button>
      </div>
    );
  }
}

export default RefExampleClass;



3. forwardRef 메서드 호출 예제

React 컴포넌트에서 ref prop을 사용하려면 React에서 제공하는 forwardRef() 함수로 감싸주면, 해당 컴포넌트는 함수는 두 번째 매개 변수를 갖게 되는데, 이를 통해 외부에서 ref prop을 넘길 수 있다.

useRef 훅을 사용하여 함수형 컴포넌트의 ref를 생성하고, 버튼 클릭 시 해당 ref를 통해 메서드를 호출하는 방식으로 아래 코드서는 RefWithMethodCall 함수형 컴포넌트에서 RefWithMethodCallCustom 함수형 컴포넌트에 ref를 사용하여 직접 접근하고, 버튼 클릭 시 customMethod를 호출하는 방식을 보여줍니다. React.forwardRef 함수를 사용하여 ref를 전달받아 사용하는 함수형 컴포넌트를 만들 수 있다.

RefWithMethodCall.js

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

const RefWithMethodCall = () => {
  // ref 생성
  const customComponentRef = useRef(null);

  // 버튼 클릭 시 ref를 통해 customMethod 호출
  const handleButtonClick = () => {
    customComponentRef.current.customMethod();
  };

  return (
    <div>
      {/* ref를 컴포넌트에 연결 */}
      <RefWithMethodCallCustom ref={customComponentRef} />

      {/* 버튼을 클릭하면 ref를 통해 customMethod 호출 */}
      <button onClick={handleButtonClick}>메서드 호출</button>
    </div>
  );
};

export default RefWithMethodCall;


RefWithMethodCallCustom.js

import React from "react";

// ref를 전달받아 사용될 함수형 컴포넌트
const RefWithMethodCallCustom = React.forwardRef((props, ref) => {
  // 메서드 정의
  const customMethod = () => {
    alert("RefWithMethodCallCustom 의 메서드가 호출되었습니다!");
  };

  // ref를 할당
  React.useImperativeHandle(ref, () => ({
    customMethod,
  }));

  return <div>Ref 메서드예제 컴포넌트</div>;
});

export default RefWithMethodCallCustom;



설렁설렁~ 다음주부터 열심히~