[React] ref

/* 정보 전달 목적의 글 보다는 공부하면서 기억하기 위해 적는 글입니다.
따라서 깊이가 얕으며, 잘못된 정보가 있을 수 있습니다. */

---

ref란?

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

ex. 특정 input에 포커스 주기, 스크롤 박스 조작하기, canvas 요소에 그림 그리기

 

ⓐ 콜백 함수를 통한 ref 설정

ⓑ 클래스 컴포넌트에서의 ref : createRef

ⓒ 함수형 컴포넌트에서의 ref : useRef

 

ⓐ 콜백 함수를 이용한 ref

 

import React from "react";

class MyComponent extends React.Component {
  handleFocus = () => {
    this.input.style.backgroundColor = 'blue';
  }

  render() {
    return (
      <div>
        <div style={{
          backgroundColor: 'red'
        }} ref={(ref) => { this.input = ref }} onClick={this.handleFocus}>ㅎㅇ</div>
      </div>
    )
  }

}

export default MyComponent;

 

ⓑ createRef를 이용한 ref 사용

 

import React from "react";

class MyComponent extends React.Component {
  input = React.createRef();

  handleFocus = () => {
    this.input.current.style.backgroundColor = 'blue';
  }

  render() {
    return (
      <div>
        <div style={{
          backgroundColor: 'red'
        }} ref={this.input} onClick={this.handleFocus}>ㅎㅇ</div>
      </div>
    )
  }

}

export default MyComponent;

 

ⓒ useRef를 이용한 ref 사용

 

import React, { useRef } from "react";

const MyComponent = () => {
  const input = useRef();

  const handleFocus = () => {
    input.current.style.backgroundColor = 'blue';
  }

  return (
    <div>
      <div style={{ backgroundColor: 'red' }} ref={input} onClick={handleFocus} >ㅎㅇ</div>
    </div>
  );
}

export default MyComponent;

 

 

컴포넌트에 ref 달기

컴포넌트 내부에 있는 DOM을 컴포넌트 외부에서 사용할 때 쓰는 방법이다.

 

import React, { Component } from 'react';
import ScrollBox from './ScrollBox';
class App extends Component {
  render() {
    return (
      <div>
        <ScrollBox ref={ref => (this.scrollBox = ref)} />
        <button onClick={() => this.scrollBox.scrollToBottom()}>
          맨 밑으로
        </button>
      </div>
    );
  }
}
export default App;

 

 

 

결론

ko.reactjs.org/docs/refs-and-the-dom.html

Ref와 DOM – React

 

 

---