⭐useRef
useRef는 리액트 훅의 한 종류로, Ref는 reference(참조)의 줄임말이다.
useRef를 이용하면 특정한 DOM요소에 접근이 가능하며, 불필요한 재렌더링을 하지 않는다는 장점이 있다.
useRef를 사용하면 손쉽게 input에 접근할 수 있다.
자바스크립트의 getElementById, querySelector와 비슷하다.
1. 형식
const 변수명 = useRef(초기값)결과값으로, {current: 초기값} 을 지닌 객체가 반환된다.
useRef에서 기억할 것은 이러한 current라는 키값을 지닌 프로퍼티가 생성되고, 값에 어떤 변경을 줄때도 이 current를 이용해야 한다는 점이다.
🔻반환요소에 접근
<div ref={변수명}/>2. 특징
반환된 useRef 객체는 컴포넌트의 전생애주기를 통해 유지가 된다.
-
컴포넌트가 계속해서 렌더링이 되어도 컴포넌트가 언마운드되기 전까지는 값을 그대로 유지할 수 있다.
-
currnet 속성은 값을 변경해도 상태(state)를 변경할 때 처럼 React 컴포넌트가 재렌더링 되지 않는다.
⭐ 렌더링과 상관없이, 마운트된 시점부터 언마운트된 시점까지 값을 유지한다
3. State와 차이
❗❗변경시 렌더링을 발생시키지 말아야하는 값을 다룰때 사용한다
(변화는 감지해야하지만, 그 변화가 렌더링을 발생시키면 안될때!!)
4. 장점
자주 변경되는 값을 state에 담으면, 변경될때마다 재렌더링이 일어나서 성능에 안좋은 영향을 미친다.
하지만 useRef를 이용하면 값이 변경될때마다 렌더링이 일어나지 않는다 ➡️ ⭐️ 성능향상!! ⭐️
5. 일반 변수와의 차이점
state는 변경될때마다 재렌더링이 일어나고, ref는 변경이 되어도 렌더링이 일어나지 않는다는 점을 알았다.
그러면 일반 변수에서 선언한 값과는 어떤 차이가 있을까?
countVar 변수를 선언하고 버튼을 누르면 그값에 +1을 하는 함수를 만들었다고 해보자.
const App = () => {
const countVar = 0;
const increaseVar = () => {
countVar = countVar +1;
}
return (
<div>
<p>Var: {countVar} </p>
<button onClick={increaseVar}> Var올려 </button>
</div>
)
}Var올려 버튼을 누르고 렌더링을 해주면 var는 몇이 나올까?
정답은 0이다.
렌더링을 해준다는 것은 함수를 처음부터 다시 실행한다는 것을 의미한다.
그래서 렌더링을 할때마다 App컴포넌트를 나타내는 함수가 다시 불린다. 그러면 함수가 불릴때마다 이 함수 내부에 있는 변수들이 다시 초기화가 된다.
따라서 렌더링이 될때마다 const countVar = 0; 를 통해서 countVar변수는 계속해서 0으로 초기화가 된다.
🤔 useRef훅을 이용한 값과의 비교
ref의 값은 컴포넌트의 전생애주기를 통해서 관리되기 때문에, 아무리 컴포넌트가 렌더링 되더라도 언마운트가 되기 전까지는 값을 계속해서 유지한다.
(렌더링할 때마다 재설정되는 일반 변수와 달리) 리렌더링 사이에 정보를 저장할 수 있습니다.
✅ ref는 렌더링이후에도 값이 유지되지만, 변수는 초기화된다.
6. 대표적인 예시
- useRef로
DOM을 조작하는 예시
- 텍스트 input에 초점 맞추기
- 이미지 스크롤하기
- 비디오 재생
- 컴포넌트에 ref 노출하기
- useRef로
값을 참조하는 예시
- 카운터하기
- 스탑워치
*참고(https://react-ko.dev/reference/react/useRef)
7. 조심할 것
-Do not write or read ref.current during rendering.
렌더링 중에는 ref.current를 쓰거나 읽지 마세요.
컴포넌트는 이러한 규칙을 어기더라도 여전히 작동할 수도 있지만, React에 추가되는 대부분의 새로운 기능들은 이러한 기대에 의존합니다. 자세한 내용은 컴포넌트를 순수하게 유지하기에서 확인하세요.
리액트 문서에 의하면 직접적으로 current사용읠 지양하라고 하는데 아직까지는 완전하게 이해되지않는다....
✍🏻useRef 요약
//생성
const 변수명 = useRef(초기값)
// {current: 초기값} 을 지닌 객체가 반환됨
//반환요소에 접근
<input ref={변수명}/>-
변화는 감지하지만 렌더링 발생 X ➡️ 성능향상 (state는 변화시, 재렌더링됨)
-
DOM요소에 손쉽게 접근 (ref속성 사용)
-
전생애주기를 통해 유지 (언마운트 되기전까지는 값을 계속 기억함)
참고자료
리액트 useRef란링크텍스트
