• DOM 요소에 id를 사용하는 것과 달리 ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동한다.
• ref는 어떤 상황에서 쓰일까? → DOM을 꼬옥 직접 건드려야 할 때!
  • 특정 input에 포커스 주기
  • 스크롤 박스 조작하기
  • Canvas 요소에 그림 그리기
  • ...
• DOM에 직접 접근하여 구현: http://jsbin.com/qawucezuci/edit?html,output
• DOM에 직접 접근하지 않고 state로 구현

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

class App 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}>ok</button>
      </div>
    )
  }
}

export default App;

ref를 꼬옥 사용할 필요가 있을 때, 그때 보자..

컴포넌트 반복