- 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를 꼬옥 사용할 필요가 있을 때, 그때 보자..
컴포넌트 반복