리액트 훅 - 유즈레프 (돔요소 사용하기)

바닐라 자바스크립트의 경우 돔요소를 동적으로 활용하기 위해 쿼리셀렉터 등 해당 요소를 가져오는 다양한 방법을 제공합니다. 반면, 리액트는 컴포넌트 함수 안에서는 요소에 직접 코드를 작성하는 것이 가능하고 위처럼 다큐먼트객체를 활용하여 요소를 가져올 수 없기 때문에 순수 자바스크립트에서 사용되는 방식은 활용도가 낮습니다.

 

하지만, 바닐라 자바스크립트에서 처럼 요소를 가져와서 작업하는 방법의 비중이 큰 만큼, 이러한 기능이 존재한다면 알아 두는 것도 좋겠죠. 유즈 레프는 요소에 대한 레퍼런스를 만들고 해당 요소를 활용하는 훅으로 바닐라 자바스크립트에서 처럼 요소를 가져와서 작업하는 것을 가능하게 해 줍니다.

프로젝트 구성하기

리액트 앱 생성

리액트?

사용방법

사용하고자 하는 컴포넌트에 유즈레프를 가져옵니다.

import { useRef } from 'react'

요소를 참조할 변수를 생성하고 유즈레프를 초기화합니다.

생성한 변수를 활용하고자 하는 요소 아래 속성을 추가하고 값으로 부여합니다.

ref={<var>}

설정 후 로그 해보면

아래처럼 객체 안에 current라는 값이 반환되는 데.

이 current 요소를 의미합니다. 

<var>.current

사용하기

요소가 가진 속성을 활용하여 그 값을 변경할 수 있습니다.

이상으로 리액트 유즈레프 훅을 사용하는 방법을 보았습니다.

---

참고

Traversy Media - YouTube

Traversy Media