ref: DOM에 이름 달기

ref : DOM에 이름 달기

1. ref는 어떤 상황에서 사용해야 할까?

  ref를 사용해야 하는 상황은 한 문장으로 'DOM을 꼭 직접적으로 건드려야 할 때'이다. 바닐라 자바스크립트에서 DOM 요소를 조작하는것과 유사하다. 바닐라 자바스크립트에서는 DOM을 직접 건드리는 경우가 굉장히 많았지만, 리액트에서는 굳이 DOM에 접근하지 않아도 state로 구현할 수 있는 경우가 많다. 

2. DOM을 꼭 사용해야 하는 상황은 언제일까?

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

등 많은 상황이 있고 어쩔 수 없이 DOM에 직접적으로 접근해야 한다. 이런 상황에서 ref를 사용한다.

3. ref 사용하는 방법

  ref를 사용하는 방법은 클래스형과 함수형에 따라 작성 방법에 차이가 있으나 동작 원리는 동일하다. 우선 클래스형 컴포넌트의 경우를 살펴 보자면 크게 2가지로 나눠 작성할 수 있다.

 

1. callback함수를 통해 ref 설정하는 방법

 

  ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달해 주면 된다. 이 콜백 함수는 ref 값을 파라미터로 전달받고, 함수 내부에서 파라미터로 받은 ref를 컴포넌트의 멤버 변수로 설정해 준다.

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

 

2. createRef를 통한 ref 설정

  이 방법은 리액트에 내장되어 있는 createRef 함수를 사용하는 것이다. createRef를 사용하여 ref를 만들려면 우선 컴포넌트 내부에서 멤버 변수로 React.createRef( )를 담아 주어야 한다. 그리고 해당 멤버 변수를 ref를 달고자 하는 요소에 ref props로 넣어 주면 ref 설정이 완료된다.

import { Component } from 'react';

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

  handleFocus = () => {
    this.input.current.focus();
  }

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

export default Practice;

  참고로 ref를 설정해 준 DOM에 접근하려면 this.input.current로 조회해야 한다.

 

3. 함수형 컴포넌트 ref 달기

 

  함수형 컴포넌트에서 ref를 달기 위해서는 useRef Hook을 사용하면 된다. 사용방법은 createRef와 유사하다.

 

4. 주의사항

  위에서도 언급했지만 컴포넌트 내부에서 DOM에 직접 접근해야 할 때 ref를 사용해야 한다. 먼저 ref를 사용하지 않고도 원하는 기능을 구현할 수 있는지 사전에 고려한 후에 활용하는 습관을 들이면 좋다. 참고로 서로 다른 컴포넌트끼리 데이터를 교류할 때 ref를 사용한다면 이는 잘못된 사용 방법이다. 물론 가능은 하지만 앱 규모가 커지면 스파게티코드가 될 가능성이 높아 유지 보수가 불가능해 질지 모르기 때문이다. 리액트에서 컴포넌트끼리 데이터를 교류할 때는 언제나 데이터를 부모 -> 자식 흐름으로 교류하는 것이 좋은 설계이다.