[React] useRef Dom 선택

---

1.useRef 

리액트의 훅 중 하나로, 함수형 컴포넌트에서 DOM 요소나 값의 참조를 유지하는 데 사용됩니다.
DOM 요소에 직접 접근, 렌더링과 무관하게 값을 저장때 사용됩니다.
이 객체는 컴포넌트의 렌더 사이클 간에 값을 유지할 수 있습니다.

 

 

 

 

 

2.useRef로 DOM 접근

useRef(null)을 호출하여 inputRef라는 ref 객체를 생성합니다.

ref={inputRef}를 사용하여 input 요소에 inputRef를 연결합니다.

inputRef.current를 통해 실제 DOM 요소에 접근할 수 있으며, focus() 메서드를 호출하여 입력 필드에 포커스를 맞출 수 있습니다.

import React, { useRef } from 'react';

function FocusInput() {
  // useRef 훅을 사용하여 ref 객체 생성
  const inputRef = useRef(null);

  // 버튼 클릭 시 입력 필드에 포커스를 맞추는 함수
  const focusInput = () => {
    inputRef.current.focus(); // ref를 통해 DOM 요소에 접근하고 focus() 메서드 호출
  };

  return (
    <div>
      <input ref={inputRef} placeholder="여기에 포커스 맞추기" />
      <button onClick={focusInput}>포커스 맞추기</button>
    </div>
  );
}

export default FocusInput;