[7# useRef] React에서 Dom조작하기

목차 :

1. useRef

---

 

1. useRef?

useRef는 React Hook 중 하나로 Functional Component에서 DOM 요소나 다른 값에 접근하기 위해 사용한다.

즉, JS 진영에서 HTML 요소에 접근할 수 있게 해주는 것이다.

예를 들면 useRef를 이용해 input 요소에 사용자가 입력한 값이 정상적이지 않을 경우 포커스 시켜 다시 입력을 요구하게 할 수 있는 것이다.

 

사용 예시는 아래와 같다.

import React, { useRef } from 'react';

function FocusInput() {
  const inputRef = useRef(null);

  const handleFocus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <h1>useRef를 사용한 포커스 예제</h1>
      <input type="text" ref={inputRef} />
      <button onClick={handleFocus}>포커스 주기</button>
    </div>
  );
}

export default FocusInput;

 

input tag의 ref 에 선언해준 inputRef를 연결해준다. 그러면 inputRef를 통해 input 요소에 접근할 수 있다.

이때 button을 클릭하면 inputRef의 현재(current)값에 focus를 준다.