5장. ref: DOM에 이름 달기

ref는 언제 쓸까...!?

-> DOM을 꼭 직접적으로 건드려야 할 때

 

DOM을 꼭 사용해야 하는 상황

1. 특정 input에 포커스에 주기

2. 스크롤 박스 조작하기

3. Canvas 요소에 그림 그리기

등등...

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

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

  input = React.createRef();

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

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

  render() {
    return (
      <div>
        <input
          ref={(ref) => (this.input = ref)} //input을 ref로 등록해두고 다른 곳에서 접근이 가능하다.
          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;

<주의>
서로 다른 컴포넌트끼리 데이터를 교류할 때 ref를 사용하는 것은 잘못된 것이다.

-> 가능하긴 하지만, 그럴 경우 스파게티 코드가 되어버림.

-> Redux, Context API를 사용해서 해결함.