Ref

 

Ref

일반적으로 Javascript에서 DOM에 직접 접근할 때는 document.getElementById 등을 통해서 접근한다.

React에서는 ref 라는 것을 사용해서 접근하게 된다.

 

Ref 란?

• ‘reference’의 약자로 ‘참조'라는 뜻이다.
• 노드나 컴포넌트에 ref 값을 만들어서 해당 요소의 값을 얻어오거나 해당 요소를 제어하는 데 사용된다.
• render 메소드에서 생성된 DOM 노드나 React element 를 엑세스 하는 방법을 제공하는 것이다.

 

• React에서 Ref를 사용하는 경우는 다음과 같다.
  1. input / textarea 등에 포커스를 해야 할때
  2. 특정 DOM 의 크기를 가져와야 할 때
  3. 특정 DOM 에서 스크롤 위치를 가져오거나 설정을 해야 할 때
  4. 외부 라이브러리 (플레이어, 차트, 캐로절 등) 을 사용 할 때

 

• 선언하여 해결할 수 있는 문제에 대해서는 ref 사용을 지양해야 한다.
  • 예시) Dialog 컴포넌트에서 open() 과 close() 메서드를 두는 대신, isOpen 이라는 prop을 넘긴다.

 

Ref 설정

• DOM에 ref 속성을 설정한다.
• 설정하는 값은 함수로 ref를 파라미터로 가져와서 컴포넌트의 멤버변수로 설정하면 된다.

<div ref={ref => { this.mydiv = ref }}></div>

 

외부 라이브러리 사용 예시

CKEditor 라는 라이브러리를 사용하는 예시이다.

// App.js

import React, { Component } from 'react'
import './App.css';

const { ClassicEditor } = window
class App extends Component {
  // 멤버변수 선언
  editor
  editorDivRef
  
  async componentDidMount() {
    // editor 생성
    this.editor = await ClassicEditor.create(this.editorDivRef)
  }

  render() {
    return (
      <div className="editor-container">
	<div id='editor' ref={ref => this.editorDivRef = ref}></div>
      </div>
    ); 
  }
}

export default App;

 

1. 라이브러리를 적용 할 DOM에 ref를 설정한다.

<div id='editor' ref={ref => this.editorDivRef = ref}></div>

 

2. componentDidMount 가 발생하면 외부라이브러리 인스턴스를 생성한다.

 async componentDidMount() {
    // editor 생성
    this.editor = await ClassicEditor.create(this.editorDivRef)
  }

 

3. 컴포넌트 내용이 바뀌어야 할 일이 있다면, componentDidUpdate 에서 기존의 인스턴스를 제거하고 새로 인스턴스를 만든다.

     => 이 과정에서 componentDidUpdate 에서 실제 데이터가 바뀌었는지 비교를 해야한다.

 

4. 컴포넌트가 언마운트될 때 인스턴스를 제거한다.