[010] 리액트 (React) 배우기 - useRef Hook (DOM 요소 접근) 사용

안녕하세요~ totally 개발자입니다.

 

useRef

 

오늘은 useRef에 대해서 살펴보도록 하겠습니다. useRef는 상태가 변할 때마다 렌더링이 되어도 useRef의 값은 유지가 된다는 점이고 useRef의 값이 변경되더라도 재렌더링이 일어나지 않기 때문에 매우 유용하게 사용할 수 있습니다. 보통 state(상태)가 업데이트되어 다시 렌더링을 하면 내부 변수들 및 함수가 초기화되고 다시 실행됩니다. 또한 useRef는 DOM요소에 접근할 때 많이 사용됩니다. querySelector랑 거의 똑같은 역할을 합니다. 이번 시간에는 버튼을 눌렀을 때 input 태그에 focus 초점을 주도록 해보겠습니다.

 

Step 1: UsernameComponent.js 파일을 하나 생성하고 다음처럼 코딩해줍니다. 2번째 줄에 useRef를 import 해주고 5번째 줄처럼 const usernameInput = useRef();로 선언한 뒤에 13번째 줄 <input ref={usernameInput} />으로 연결시켜 줍니다. 그리고 버튼을 눌렀을 때 usernameFocus 함수를 사용하여 usernameInput.current.focus();로 초점을 줄 수 있도록 합니다. 

 

 

Step 2: App.js 파일을 수정해서 UsernameComponent를 추가합니다.

 

 

Step 3: Click 누르면 이렇게 초점이 되어 있는 것을 확인해볼 수 있습니다.