useRef란?
useState와 더불어서 특정 값을 저장하기 위해서 사용
수정가능한 참조를 생성하고 관리하는 데 사용된다.
주로 DOM요소에 직접 접근하거나, 렌더링 간에 값을 유지하고 싶을 때 유용하다.
주요특징
DOM 접근:
useRef를 사용하여 특정 DOM요소에 접근할 수 있다.
ref속성에 useRef로 생성한 참조를 할당하면, 해당 요소에 대한 참조가 current속성에 저장된다.
값 유지:
useRef는 컴포넌트가 다시 렌더링되어도 값을 유지할 수 있다.
이는 상태를 저장하는 것과는 다르게, 렌더링 사이에 변화를 추적할 수 있다.
예를 들어 타이머 ID나 이전 상태를 저장할 때 사용할 수 있다.
렌더링에 영향 없음:
useRef에 저장된 값이 변경되더라도 컴포넌트의 리렌더링을 트리거하지 않는다.
이는 이는 성능 최적화에 도움이 된다.
사용예시
Dom요소의 포커스 설정 :
타이머 ID저장
setTimeout이나 setInterval의 ID를 저장하여
나중에 클리어할 때 사용할 수 있다.
이전 값 저장: 이전 렌더링의 상태를 추적하고 싶을 때 유용
useRef는 React에서 DOM요소에 접근하거나, 렌더링 사이에 값을 유지하는 데 매우 유용한 훅이다.
이를 통해 상태 관리나 DOM 조작을 더 간편하게 할 수 있으며,성능 최적화에도 기여할 수 있다.
이제 실습을 통해 익숙해지자.
-
useRef import
-
useRef 선언
ex) const ref = useRef("초기값");
콘솔 로그에서 ref의 값을 확인해보자
ref를 출력해보았더니 객체이며, current를 가지고 있다는 것을 확인할 수 있었다.
그럼 ref는 변경이 가능할까?
ref.current = "바꾼 값";
이렇게 콘솔을 찍어보았더니
바꾼 값이 잘 출력되는걸 확인했다 이로써 ref의 값이 변경이 가능하다는 것을 알게되었다.
useState와의 차이점:
useState는 렌더링을 일으킬 수 있는 함수
useRef는 렌더링과 연관이 없다.
이러한 특성 떄문에 useRef는 Dom 요소에 접근하는 역할을 하기도 한다.
👉 자 이제 useState와 useRef의 차이점을 실습을 통해 눈과 손으로 확인해보자
결과
해당 영역을 아무리 클릭해도 ref영역의 숫자는 바뀌지 않는다
하지만
state증가 버튼을 클릭하는 순간 state의 값이 변경되고 리렌더링이 일어나면서 이전에 증가가 되지 않던 ref의 변경된 값도 화면에서 출력되는걸 볼 수 있었다.
👉 두번째 실습 - Dom 요소에 접근
창이 열렸을 때 지정된 곳에 포커싱이 가도록 할 수 있다.
방법: input 부분을 useRef로 담은 다음 포커싱을 주면 된다.
- useRef import
- usRef 선언
- 포커스 하고 싶은 곳에 ref 와 선언한 useRef를 연결
- useEffect를 이용하여 마운트 시점에 포커스
😃 useRef에 대해 알아봤는데
useState, useEffect, useRef 모두
처음접하는 개념이기 때문에 머리가 아팠지만
언젠간 익숙해지겠지 하는 마음으로
여러번 강의를 듣고 실습을 반복하니 점점 익숙해지며 차이점과 사용방법, 사용사례에 대해 이해가 되는게 느껴졌다.
이 때 가장 기분이 좋다 : )
머리가 많이 아팠던 만큼 더 좋다 : )
개념을 잘 정리되어야 응용도 되고 활용도 된다고 생각한다.
여기서 멈추지 않고 반복된 실습을 통해 내 것으로 만들어야겠다!
