ref 를 알아보자 (ref DOM)

ref 란?

---

HTML id 를 사용하는것처럼 DOM 에 이름을 다는것처럼 프로젝트 내부에서 DOM 에 이름을 다는 방법이 ref (reference) 개념이다

• DOM 을 꼭 직접적을 건드려야 하는 특수한 경우에 사용하는 것을 권장
  • 특정 input d에 포커스 주기
  • 스크롤 박스 조작하기
  • Canvas 요소에 그림 그리기 등

개인적으로 jQuery 한창 쓸 때도 기본 js 방식으로 코드를 많이 짜서 id 를 쓰는 것이 익숙했는데 React 와서는 코드를 짜는 방법이 조금 달라 감이 잘 잡히지 않았던 경험이 있다.

+ DOM 에 관련있기도하고 React 를 이해하는데 클래스형 컴포넌트가 도움 될 것 같아 일단 클래스형 컴포넌트에서도 사용하는 방법을 적어둠

콜백 함수 를 통한 ref 설정방법

---

클래스 형

import React, { Component } from  'react'

export  default  class  Test  extends  Component {
    onClick = () => {
        alert(this.input.value);
    }
    render() {                 
        return (
            <div>
                <input type='text' ref={(ref) => {this.input = ref}}></input>
                <button onClick={this.onClick}>버튼</button>
            </div>
        )
    }
}

• 이제 this.input 은 input 태그를 가르키게 된다.
• 이후 this.input.value 값을 가져와 사용 할 수 있게 됨

함수형

• 함수형 컴포넌트 에서 굳이 활용하면 이렇게 할 듯

import React from  'react'

const  Test  = () => {
    let  input;

    const  onClick  = () => {
        alert(input.value)
    }

    return (
        <div>
            <input  type='text'  ref={(ref) => {input = ref}}></input>
            <button  onClick={onClick}>버튼</button>
        </div>
    )
}
export  default  Test

createRef 를 통한 ref 설정방법 (클래스형 컴포넌트 에서만 사용)

---

클래스 형

import React, { Component } from  'react'

export  default  class  Test  extends  Component {
    input  =  React.createRef();
    onClick = () => {
        alert(this.input.current.value);
    }

    render() {                 
        return (
            <div>
                <input type='text' ref={this.input}></input>
                <button onClick={this.onClick}>버튼</button>
            </div>
        )
    }
}

• input 뒤에 current 를 붙여서 씀 ex) this.input.current.value

useRef 를 통한 ref 설정방법 (함수형 컴포넌트 에서만 사용)

---

함수형

import {React, useRef} from  'react'

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

    const  onClick  = () => {
        alert(input.current.value)
    }

    return (
        <div>
            <input  type='text'  ref={input}></input>
            <button  onClick={onClick}>버튼</button>
        </div>
    )
}
export  default  Test

• 마찬가지로 input 뒤에 current 를 붙여서 씀 ex) input.current.value