[react] JSX에서 useRef 훅 사용하기

26 Dec 2023

React에서는 DOM 요소에 접근해야 할 때 useRef 훅을 사용할 수 있습니다. 이를 통해 DOM 요소를 선택하고 조작할 수 있습니다. JSX에서 useRef를 사용하는 방법을 알아보겠습니다.

useRef 훅이란?

useRef는 컴포넌트 안에서 DOM 요소 또는 다른 값을 유지할 수 있는 React 훅입니다. 이를 이용해 DOM 요소에 접근하거나, 이전 값과 새로운 값을 비교할 수 있습니다.

JSX에서 useRef를 사용하려면, 먼저 해당 컴포넌트 상단에 다음과 같이 useRef를 import 해야 합니다.

import React, { useRef } from 'react';

다음으로, 컴포넌트 안에서 useRef를 사용하고 싶은 DOM 요소에 대한 참조를 생성합니다.

function MyComponent() {
  const inputRef = useRef(null);

  // ...

  return (
    <input ref={inputRef} />
    //...
  );
}

위 예시에서 input 요소에 useRef를 사용해 inputRef라는 변수에 참조를 저장했습니다. 이 참조를 통해 input 요소를 조작할 수 있습니다.

JSX에서 useRef 훅을 사용하여 DOM 요소에 쉽게 접근하고 조작할 수 있습니다. 이를 통해 React 애플리케이션을 보다 유연하게 제어할 수 있습니다.