useRef
useRef는 리액트 훅의 한 종류로, Ref는 reference(참조)의 줄임말이다.
useRef의 용도
useRef의 용도는 크게 값을 저장할때와 DOM에 접근할때 2가지로 나뉜다.
1. 값의 저장
리액트에서 값을 저장할때 useRef를 사용하며 다음과 같이 사용할 수 있다.
const 변수명 = useRef(초기값) // 반환값 {current: 0}위처럼 사용하면 현재 값을 나타내는 current속성을 가진 객체가 반환된다.
리액트에서는 useRef외에도 useState를 사용하거나 일반 변수(let, const)를 사용해서 값을 저장할 수 있는데
useRef는 이 두 방식과 다음과 같은 차이를 보인다.
useRef와 useState의 차이
useState는 값이 변경될 때 화면이 재렌더링 되지만
useRef는 렌더링 되지 않는다.
useRef와 일반변수의 차이
ref변수는 컴포넌트의 전체 생애주기에 거쳐서 컴포넌트가 해제되기 전까지 값이 유지되지만
일반변수는 컴포넌트 렌더링마다 값이 초기화 된다.
2. DOM 요소 접근
useRef를 사용해서 DOM 요소에도 쉽게 접근할 수 있다.
const inputRef = useRef();
useEffect(() => {
inputRef.current.focus();
}, []);
const login = () => {
alert(`환영합니다 ${inputRef.current.value}`);
inputRef.current.focus();
};
return (
<div className="App">
<input ref={inputRef} type="text" placeholder="username"></input>
<button onClick={login}>로그인</button>
</div>
);
위 코드처럼 접근하고 싶은 요소에 ref 속성을 주고 useRef()로 선언한 변수를 할당해주면
변수의 current 속성에 input 엘리먼트 객체가 담겨 있어 쉽게 DOM 접근이 가능하다.
✨ 참고문서 ✨
