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 버튼 클릭 결과

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.