[React] ref

Ref 란?

DOM을 꼭 직접적으로 건드려야할 때 사용한다.

• 특정 input에 포커스 줄 때
• 스크롤 박스 조작할 때
• Canvas 요소에 그림 그리기 등등...

ref를 사용하는 방법

1. 콜백 함수를 통한 ref 설정

import React, { useRef } from 'react';

const MyComponent = () => {
  const myRef = useRef(null);

  // ... 나머지 컴포넌트 코드
};

useRef 훅을 사용해서 ref를 생성하는 방법이다.
이때, 초기값을 null로 설정한다.

const setMyRef = (node) => {
  if (node) {
    // ref가 설정될 때 실행할 작업을 여기에 추가
    console.log('Ref가 설정되었습니다!');
  }

  // ref를 실제 변수에 할당
  myRef.current = node;
};

ref를 설정할 때 사용될 콜백 함수를 정의한다.
이 함수는 ref 객체를 매게변수로 받아서 해당 객체를 원하는 변수에 할당한다.

const MyComponent = () => {
  const myRef = useRef(null);

  const setMyRef = (node) => {
    if (node) {
      console.log('Ref가 설정되었습니다!');
    }
    myRef.current = node;
  };

  return (
    <div ref={setMyRef}>
      {/* 컴포넌트의 내용 */}
    </div>
  );
};

컴포넌트의 JSX 요소에 앞서 정의한 콜백 함수를 전달한다.
일반적으론 JSX에서 ref 속성을 사용하여 전달한다.

2. createRef를 통한 ref 설정

import React, { createRef } from 'react';

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

  // ... 나머지 컴포넌트 코드
}

createRef 함수를 사용하여 ref를 생성한다.

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

  render() {
    return (
      <div ref={this.myRef}>
        {/* 컴포넌트의 내용 */}
      </div>
    );
  }
}

생성한 ref를 컴포넌트의 JSX 요소에 연결한다. 이를 위해 ref 속성을 사용한다.

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

  componentDidMount() {
    // ref를 통한 작업 수행
    if (this.myRef.current) {
      console.log('Ref가 설정되었습니다!');
    }
  }

  render() {
    return (
      <div ref={this.myRef}>
        {/* 컴포넌트의 내용 */}
      </div>
    );
  }
}

this.myRef.current를 통해 ref를 접근할 수 있다.

두 방법의 차이점은?

- 콜백 함수를 통한 방법
1. 함수형 및 클래스 컴포넌트에서 사용 가능하다.
2. 콜백 함수를 통해 직접 ref에 접근하다.
3. ref가 설정될 때 콜백 함수를 사용하여 추가 작업을 수행할 수 있다.

- createRef를 통한 방법
1. Class 컴포넌트에서 사용 주로 사용한다.
2. Ref에 접근할 때 this.myRef.current를 사용한다.
3. 코드가 간결하고 직관적이며, 클래스형 컴포넌트에서 사용되는 표준적인 방법이다.