ref를 사용하는 상황

리액트 컴포넌트 안에서도 id를 사용할 수 있지만 JSX 안에서 DOM에 id를 달면 해당 DOM을 렌더링 할 때 그대로 전달된다. 하지만 특수한 경우가 아니면 사용을 권하지 않는다.

같은 컴포넌트가 여러번 사용되는 경우 HTML에서 DOM의 id는 유일해야하는데 중복된 id를 가진 DOM이 여러 개 생기니 잘못된 사용이다.

ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 문제가 발생하지 않는다.

DOM을 꼭 직접적으로 건드려야 할 때 ref를 사용한다.

.success {
  background-color: lightgreen;
}

.failure {
  background-color: lightcoral;
}

import React, { Component } from 'react';
import './ValidationSample.css';

class ValidationSample extends Component {
  state = {
    password: '',
    clicked: false,
    validated: false,
  };

  handleChange = (e) => {
    this.setState({
      password: e.target.value,
    });
  };

  handleButtonClick = () => {
    this.setState({
      clicked: true,
      validated: this.state.password === '0000',
    });
  };

  render() {
    return (
      <div>
        <input
          type="password"
          value={this.state.password}
          onChange={this.handleChange}
          className={
            this.state.clicked
              ? this.state.validated
                ? 'success'
                : 'failure'
              : ''
          }
        />
        <button onClick={this.handleButtonClick}>검증하기</button>
      </div>
    );
  }
}

export default ValidationSample;

위 예시를 보면 state를 사용하여 필요한 기능을 구현할 수 있다.

DOM을 꼭 사용해야 하는 상황

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

이 상황에서는 어쩔 수 없이 DOM에 직접적으로 접근해야 한다. 이를 위해 ref를 사용한다.