react hook - useRef

useRef

state와 다르게 값이 변경되어도 렌더링 되지 않는다.

컴포넌트가 렌더링 되어도 값이 유지된다.

 

활용 방법

• 저장공간으로 사용된다.
• DOM 요소에 접근할 수 있다.

 

DOM 요소에 접근하는 방법

1. useRef를 사용하여 Ref 객체를 만든다.
2. 접근하려는 DOM 요소에 ref 속성을 추가하여 설정한다.

import React, { useEffect, useRef } from 'react' //import

export default function App() {
  const inputRef = useRef(null); //useRef 선언
  
  //화면이 렌더링 될 때 할 작업
  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return (
    <input type="text" ref={inputRef} />
  )
}

ref 객체의 current에 지정한 DOM 요소가 잘 들어간 걸 확인할 수 있다.