React - useRef

useRef

Html과 Javascript를 사용할 때 특정 돔을 선택해야 할 때 getElementById나 querySelector와 같은 돔 셀렉터 함수를 이용한다.

리액트를 사용하는 과정에서도 가끔씩 돔을 직접 선택해야 하는 상황이 발생한다.
특정 엘리멘트의 크기나 위치를 가져온다던가, 스크롤바의 위치를 가져오거나 설정해야 할 때, focus를 설정해줘야 한다던가 하는 상황이 존재한다.

이렇게 돔을 선택해야 하는 상황이 발생하게 되는데 이 때 Ref를 사용하게 된다. 함수형 컴포넌트에서 ref를 사용할 때 useRef를 사용하게 된다. class형 컴포넌트에서는 React.createRef()를 사용하게 된다. 또한 콜백함수로도 사용할 수 있다.

여기에서는 함수형컴포넌트에서 ref를 사용하는 법을 배운다.

useRef는 돔을 선택하는 것 이외에도 렌더링과 전혀 관계없는 변수 같은 것을 관리할 때에도 사용하게 된다.

위에서 구현한 것은 이름과 닉네임을 입력하고 나서 초기화버튼을 누르게 되면, 포커스가 자동으로 이름 쪽으로 가게 되는 것을 구현한 것이다.