React ref 사용하기

Lia·2021년 7월 13일
0

React.js

목록 보기
2/4
Contents
1. 콜백 함수를 통한 ref 설정
2. createRef 를 통한 ref 설정
3. 컴포넌트에 ref 사용하기

ref 는 리액트에서 render 메서드에서 생성된 DOM 노드
React 엘리먼트 에 접근하게 해줍니다.

ref 는 주로 DOM 을 직접적으로 접근해야 할 때에 사용합니다.

ref 는 클래스형 컴포넌트에서 사용가능하고
함수형 컴포넌트에서는 Hook Api 를 이용하여 ref 를 사용해야 합니다.


# 01 - 콜백 함수를 통한 ref 설정

ref 를 사용하고자 하는 요소에 ref 콜백함수를 props 로 전달해 줍니다.

<input ref={(ref) => {this.input=ref}} />

위와 같이 설정하게 되면 this.inputinput 요소의 DOM 을 가리키게 됩니다.


# 02 - createRef 를 통한 ref 설정

createRef 함수는 React v16.3 부터 적용되었습니다. 이전버전은 createRef 함수를 사용할 수 없습니다.

(...)

import React, { Component } from 'react';

class MyComponent extends React.Component {
  myRef = React.createRef();
  
  render() {
    return <div ref={this.myRef} />;
  }
}

(...)

createRef 함수를 사용하여 ref 를 설정하면 사용할 때에는
.current 를 넣어서 DOM 에 접근해야 합니다.


# 03 - 컴포넌트에 ref 사용하기

컴포넌트에서 ref 를 사용하여 컴포넌트 외부에서
컴포넌트 내부의 DOM 을 사용할 수 있고 또한 메서드와
멤버변수에도 접근할 수 있습니다.

컴포넌트에서 ref 는 다음과 같이 사용할 수 있습니다.

<MyComponent ref={(ref) => {this.myComponent=ref}}/>

위와 같이 ref 를 설정하면 외부 컴포넌트에서
this.myComponent 를 사용하여 내부 컴포넌트로 접근할 수 있습니다.




본 블로그는 김민준(velopert)님의 저서 '리액트를 다루는 기술 (개정판)'을 참고하여 정리한 글입니다. 이점 참고 부탁드립니다.

profile
하고싶은게 많아요

0개의 댓글