ref란?

HTML을 작성할 때, DOM 요소에 이름을 붙일 경우 <div id ="testId"> 와 같이 id 값을 준다.
이렇게 하면 해당 id가 있는 DOM 요소에만 스타일을 따로 적용할 수 있다.

마찬가지로 리액트에서도 DOM을 선택해 직접 접근하기위해 ref를 사용한다.

어떤 경우에 ref를 사용?

React에서 State로 해결할 수 없고, DOM을 반드시 직접 건드려야 할 때 사용하게 된다.

• js로 DOM요소에 focus, 텍스트 선택 영역, 미디어의 재생을 관리
• 애니메이션 직접적으로 실행

ref 사용 예시

class Example extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: ""
    };
  }

  render() {
    return (
      <input
        value={this.state.value}
        onChange={({ target: { value } }) =>
          this.setState({ ...this.state, value })
        }
      />
    );
  }
}

위 코드는 일반적인 React 상태로 제어하는 컴포넌트이다.
State로 input의 value를 관리하기 때문에 Input에서 키보드를 입력할 때마다 state가 변하게 되고 ui를 업데이트하기위해 re-rendering이 일어난다

이러한 프로세스는 불피요한 컴퓨팅 자원을 소모하는 이슈이다.

class Example2 extends React.Component {
  constructor(props) {
    super(props);

    this.ref = React.createRef();
  }

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

따라서 ref가 input을 가리키면 state를 변경하지 않기 때문에 re-rendering은 일어나지 않는다.

참고

• https://tecoble.techcourse.co.kr/post/2021-05-15-react-ref/