React에서 ref 사용하기


  • React의 ref를 사용하는 방법을 공부하고 정리한 내용입니다

  • 리액트에서 직접적으로 DOM을 건드려야할 때 ref를 사용한다.

  • 클래스형 컴포넌트에서는 다음과 같은 방법으롤 ref를 사용할 수 있다

createRef

  • 첫번째 방법은 createRef 함수를 사용하는 것이다

  • 아래와 같이 코드를 작성할 수 있다

import React, { Component } from 'react';

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

  handleFocus = () => {
    this.input.current.focus();
  };
  render() {
    return (
      <div>
        <input ref={this.input} />
        <button onClick={this.handleFocus}>click</button>
      </div>
    );
  }
}

export default refSample;
  • createRef 함수를 사용할 때는 컴포넌트 내부에서 변수에 React.createRef()를 할당한 다음 해당 변수를 사용하고자 하는 요소에 ref props로 넣어주면 된다

  • 설정 후 나중에 ref를 설정해준 DOM에 접근하려면 this,input.current를 조회하면 된다

  • 따라서 위 코드에서 button을 클릭하면 focus가 input 태그롤 넘어가게 된다


callback 함수를 이용한 ref 설정

  • 또 다른 방법으로는 callback 함수를 사용하는 방법이다

  • ref를 사용하고자 하는 요소에 ref라는 콜백함수를 props로 전달해준다

  • 그리고 함수 내부에서 parameter로 받은 ref를 컴포넌트의 멤버 변수롤 설정해준다

  • ref 이름은 자유롭게 작성할 수 있다

  • 아래 코드에서는 this.input이라는 이름으로 ref를 지정한다

import React, { Component } from 'react';

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

  handleFocus = () => {
    this.input.focus();
  };
  render() {
    return (
      <div>
        <input
          ref={(ref) => {
            this.input = ref;
          }}
        />
        <button onClick={this.handleFocus}>click</button>
      </div>
    );
  }
}

export default theme;

컴포넌트에서 ref 사용하기

  • 컴포넌트에서도 다음과 같이 ref를 사용할 수 있다
<refComponent
  ref={(ref) => {
    this.refComponent = ref;
  }}
/>
  • 컴포넌트를 ref를 달면 컴포넌트 외부에서도 컴포넌트 내부의 메서드 및 멤버 변수에 접근할 수 있다
  render() {
    return (
      <div>
        <ScrollBox ref={(ref) => (this.scrollBox = ref)}></ScrollBox>;
        <button
          onClick={() => {
            this.scrollBox.scrollToBottom();
          }}
        ></button>
      </div>
    );
  }

  • 위와 같이 코드를 작성하면, ScrollBox컴포넌트 바깥의 button 태그를 클릭해서 ScrollBox 컴포넌트 안의 scrollToBottom함수를 사용할 수 있다

  • button 태그에서 화살표 함수를 작성하는 이유는, 컴포넌트가 처음 렌더링 될 때는 thisscrollBox 값이 undefined 이므롤 this.scrollBox.scrollToBottm 값을 읽어오는 과정에서 오류가 발생할 수 있다

  • 즉, 다음과 같이 코드를 작성하면 에러가 발생하게 된다

<button

  onClick={this.scrollBox.scrollToBottom}
></button>

<button

  onClick={this.scrollBox.scrollToBottom()}
></button>
  • 따라서, 화살표 함수 문법을 사용하여 새로운 함수를 만들고 그 내부에서 this.scrollBox.scrollToBottom 메서드를 실행하면, 버튼을 누를 때 (이미 한 번 렌더링 해서 this.scrollBox를 설정한 시점) this.scrollBox.scrollToBottom 값을 읽어와서 실행하므로 오류가 발생하지 않는다

  • 하지만 컴포넌트끼리 데이터를 교류할 때 ref 쓰는 것은 좋은 방법이 아니다

  • 규모가 클수록 코드가 꼬여 복잡해지기 때문이다

  • 따라서 컴포넌트 끼리 데이터를 교류할 때는 부모-자식 흐름으로 교류해야 한다


Reference









© 2020. by dkmqflx

Powered by dkmqflx