5.1 ref는 어떤 상황에서 사용해야 할까?
먼저 ref는 어떤 상황에 사용해야 하는지 제대로 짚고 넘어가 봅시다. 일단 특정 DOM에 작업을 해야 할 때 ref를 사용한다는 것은 이미 파악했습니다. 하지만 대체 ‘어떤’ 작업을 할 때 ref를 사용해야 할까요?
정답은 ‘DOM을 꼭 직접적으로 건드려야 할 때’입니다. 예를 들어 일반 순수 자바스크립트 및 jQuery로 만든 웹 사이트에서 input을 검증할 때는 다음과 같이 특정 id를 가진 input에 클래스를 설정해 주지요.
일반 HTML 예제 코드(http://jsbin.com/qawucezuci/edit)
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Example</title> <style> .success { background-color: green; } .failure { background-color: red; } </style> <script> function validate() { var input = document.getElementById('password'); input.className = ''; if(input.value === '0000') { input.className = 'success'; } else { input.className = 'failure'; } } </script> </head> <body> <input type="password" id="password"></input> <button onclick="validate()">Validate</button> </body> </html>
▲ 그림 5-1 암호 0000 입력 후 Validate 버튼 클릭 결과