useRef로 DOM 접근하기
useRef를 사용하면 DOM요소에 직접 접근할 수 있다.
const ref = useRef(value);
/* { current : value } 를 반환함 */HTML 요소 태그 중 접근하고자 하는 태그의 속성에 ref를 넣어주면 된다.
<input ref={ ref } />보통 input 태그의 포커스를 줄 때 많이 사용된다.
클릭하지 않아도 자동으로 포커스가 생기기 때문이다.
ref를 사용하면 DOM 요소에 접근할 수 있다.
import { useRef, useEffect } from "react";
export default function App() {
const ref = useRef();
useEffect(() => {
ref.current.focus();
}, []);
return (
<div className="App">
<input ref={ref} type="text" placeholder="아이디 입력" />
<button>확인</button>
</div>
);
}인풋 태그 안에 ref 속성으로 useRef 반환 값을 담은 변수 이름을 작성해주면 된다.
useEffect를 사용해서 처음 화면이 렌더링됐을 때만 인풋 태그에 포커스가 되도록 작성한 코드이다.
페이지를 새로고침하면 바로 인풋창에 포커스가 생기는 것을 확인할 수 있다.
console.log(ref);
콘솔에 찍어 확인해보면 current에 input 태그가 담긴 것을 확인할 수 있다.
input에 포커스를 줄 때 ref가담긴변수명.current.focus() 를 사용해야 하는 이유도 여기에 있다.
