[REACT] useRef 사용하기

학습일 : 2023. 05. 02

---

 이번에는 useRef 에 대해 알아보도록 하자.

---

reference는 react 컴포넌트를 통해서 HTML 요소를 지정하고, 가져올 수 있도록 한다.
다시말해, 자바스크립트로부터 HTML요소를 가져오고 수정하는 방법이다.
예를 들면,   
video를 가져와서 플레이를 시키거나 video.play();
링크를 가져와서 클릭해 열거나 할 수 있다. a.click();

이건 ReactJS에서 쓰는게 아니고 일반적인 자바스크립트에서 사용하는 것이다.



<Board.tsx>
input을 만들고
onClick을 만들어 주고

버튼을 만든다. 버튼에는 onClick이벤트를 준다.

 <button onClick={onClick}>click me</button>

그리고 버튼을 클릭했을 때 input에 포커스를 주도록 하자.

const onClick = () => {};

일단 먼저,
reference를 만들어보자. inputRef로 이름 지을 것이고,
useRef Hook을 사용할건데, 기본값은 null이다.
그리고 useRef<HTMLInputElement>를 적어타입을 지정해준다.

const inputRef = useRef<HTMLInputElement>(null);

그리고 inputRef를 input에 주도록 한다.

<input placeholder="grab me" ref={inputRef} />

이제 inputRef를 사용함으로써 input에 대한 접근을 할 수 있게 되었다.
자바스크립트에서 getElementById 와 비슷한 역할이라 생각하면 될 것이다.


이제 onClick에 이렇게 작성해주면 된다.

const onClick = () => {
    // 버튼을 누르면 input을 가져와서 current element를 가져와서 focus 처리
    inputRef.current?.focus();
};

실행결과
이렇게 자바스크립트와 React.js를 이용해 모든 HTML의 method에 접근할 수 있다.
ref 자체는 react.js 의 것이지만
이걸로 인해 하는 모든 행동들이 일반 자바스크립트에서 오는 것이라 볼 수 있다.