이번 글에서는 useRef를 설명해보려한다.
최근에 블루투스 통신 앱을 개발하면서 블루투스 디바이스에서 보내주는 데이터를 받는 event listener를 선언하고, 해당 함수에서 데이터를 이용하여 화면에 뿌려주는 기능을 구현하고 있었다.
해당 함수 내에서 useState의 set함수를 사용하여 state값을 변경하려고 했는데, 함수안에서 state값을 불러와서 조작을 하려하니 초기값이 가져와지는 현상이 나타났다.
그래서 이곳저곳을 찾아보니, listener안에서 현재 state 값을 가져와서 데이터를 만들때 useRef로 변수를 만들고, current 안에 있는 data로 접근해보라는 말이 있었고 이를 통해 문제를 해결 할 수 있었다.
useRef란?
개발을 하다보면 현재 DOM 의 상태를 이용하여 애니메이션을 넣거나, 특정한 이벤트를 발생시키는 경우가 많다.
Javascript 에서는 특정 DOM을 선택하려면 ID나 Selector 함수를 이용해서 선택하게 되는데,
React 에서는 ref를 사용하여 해당 DOM 에 접근 할 수 있다.
그때 사용되는 것이 useRef이다.
...
const messageInput = useRef();
return (
<div>
<input
name="message"
placeholder="메세지"
onChange={onChange}
value={message}
ref={messageInput}
/>
</div>
)
...위의 코드처럼 ref 안에 useRef로 선언된 변수를 넣어주면 우리는 다른 곳에서 .current로 해당 DOM에 접근이 가능하다.
접근하는 간단한 예를 들자면,
만약 어떤 이벤트가 발생하고, message 입력창에 포커싱을 시키고 싶다라고 하면
messageInput.current.focus()위와 같은 메소드를 통해서 바로 접근이 가능하다.
회원가입이나 설문조사 등을 구현할 때 아주 유용하게 쓰일 수 있는 기능이다.
만약 해당 기능이 필요한 곳이 생긴다면 사용하는 것을 추천한다!
이상 끝!
