[React] useRef란?

useRef란 뭘까요?

React는 사용자 인터페이스를 만드는 데 필요한 많은 기능을 제공합니다. 그 중 하나가 useRef입니다.

 

useRef는 React Hook 함수 중 하나로, DOM 노드나 다른 React 요소에 대한 참조를 만들기 위해 사용됩니다.

 

React를 처음 시작하는 사람들은 이 개념이 어려울 수 있지만, 간단한 예제를 통해 이해해 보도록 하겠습니다.

예제를 위해, 다음과 같은 코드를 작성합니다.

import React, { useRef } from 'react';

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

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
}

이 예제는 간단한 텍스트 입력 필드와 해당 필드에 초점을 맞추는 버튼을 보여줍니다.

useRef를 사용하여 input 요소에 대한 참조를 생성합니다. 이 참조를 이용하여 handleClick 함수에서 input 요소에 초점을 맞출 수 있습니다.

 

여기서 중요한 점은 useRef로 생성된 참조는 React의 state나 props와 달리 값이 변경될 때마다 컴포넌트가 다시 렌더링되지 않는다는 것입니다.

따라서 useRef는 값이 변경되어도 다시 렌더링할 필요가 없는 값을 저장할 때 유용합니다.

 

React에서 useRef를 사용할 때 주의할 점은 useRef를 사용할 때에는 항상 null로 초기화하는 것입니다. 이는 React에서 초기값이 undefined인 경우가 있기 때문입니다.

 

이렇게 React의 useRef를 사용하면 함수형 컴포넌트에서도 DOM 노드나 다른 React 요소에 대한 참조를 만들 수 있습니다. 이를 이용하여, 컴포넌트의 상태를 변경하지 않으면서 DOM 노드를 조작할 수 있습니다.

 

위의 예제 코드처럼 useRef를 사용하여 input 요소에 대한 참조를 생성하고, 이를 이용하여 handleClick 함수에서 초점을 맞출 수 있습니다. 이처럼 useRef를 사용하면, 컴포넌트의 상태를 변경하지 않으면서 DOM 노드를 조작할 수 있으므로, React에서 상태 관리와 DOM 조작이 동시에 필요한 경우에 유용하게 사용할 수 있습니다.