useRef는 변경된 값을 저장한다는 점에서 useState와 비슷하다.
useState는 변경될 때 마다 페이지를 렌더링하며 값을 최신화하지만, useRef는 동작을 해도 값을 변경시키기만 할 뿐, 페이지를 렌더링하지않는다.
const refContainer = useRef(initialValue);
다음과 같이 선언한다.
선언된 refContainer는 다음과 같은 객체를 반환한다.
반환된 ref는 컴포넌츠 전 생애주기를 통해 유지된다. 컴포넌츠가 계속 렌더링 되어도 값을 그대로 유지한다.
값을 저장해야하지만 불필요한 컴포넌츠를 막고 싶을 때 사용한다.
{current : initialValue}
예시) 버튼을 클릭하면 ref의 값을 1씩 증가시킬 때
function Count(){
const ref = useRef(0);
function clickButton(){
ref.current = ref.current +1
}
return(
<>
<button onClick={clickButton}>클릭시 ref 1 증가</button>
</>
)
}
useRef는 DOM요소에 접근하기 위해서도 사용된다.
ref속성에 useRef로 선언된 변수를 넣어주기만 하면 해당DOM에 직접 접근할 수 있다.
다음은 페이지가 처음 렌더될 때 인풋창을 자동으로 focus해 주는 로직이다.
const inputRef = useRef();
useEffect(()=>{
inputRef.current.focus();
}, []);
return (
<>
<input ref={inputRef} type="text" placeholder="username"/>
<button>Click</button>
</>
}
};
input창의 ref속성으로 inputRef를 지정해주었다.
이후 useEffect를 사용해서 inputRef.current.focus()를 해주었는데, inputRef를 input의 ref로 지정해주었고, useRef는 값을 객체안의 current에 저장하기 때문에 inputRef.current가 직접적인 Dom의 요소가 된다.