React Hooks (useRef)

민순기
모던 애자일
Published in
Feb 14, 2022

Goal

useRef hook에 대해서 알아본다.

🤔 useRef란?

useRef.current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환한다.

🤨 useRef를 사용하는 경우

🧿 DOM 요소에 직접 접근하는 경우

React로 작업하다 보면 DOM 요소에 직접 접근해야 하는 경우가 생긴다. 그럴때 useRef를 사용하면 DOM에 직접 접근할 수 있다.

아래는 useRef를 사용하여 DOM에 접근한 예시이다.

버튼을 눌렀을 때 input에 focus가 되는 것을 확인할 수 있다.

🎯 값이 변해도 리렌더링 하지 않는 변수를 선언할 때

useRef.current 프로퍼티를 변형하는 것이 리렌더링을 발생시키지 않는다.
따라서 리렌더링을 방지하고 컴포넌트를 최적화를 할 때 활용할 수 있다.

아래의 코드를 통해 useRef가 리렌더링이 정말 되지 않는지 확인해보도록 하자.

ref.current값은 버튼을 눌러서 값을 변화시켜도 페이지가 리렌더링 되지 않고 useState 값을 변화시켜 페이지가 리렌더링 될 때 값의 변화가 적용되는 것을 확인할 수 있다.

useRef는 이런 특징으로 인해 scroll이나 setTimeout, setInterval같은 곳에 사용된다.

--

--