useRef?

React에서 useRef는 DOM 요소나 다른 컴포넌트에 대한 참조를 만드는 데 사용됩니다. useRef는 useState와 마찬가지로 Hook 함수이며, useRef를 사용하여 생성된 참조는 컴포넌트의 렌더링과 관계없이 일관된 값을 유지합니다.

useRef는 다음과 같은 상황에서 유용합니다.

• DOM 요소에 대한 참조를 만들어야 하는 경우
• 이전 값을 유지하면서 컴포넌트를 다시 렌더링해야 하는 경우
• 함수형 컴포넌트에서 인스턴스 변수를 사용해야 하는 경우

useRef를 사용하여 생성된 참조는 current라는 속성을 가지고 있습니다. 이 속성에는 useRef로 참조한 값이 저장되어 있습니다. useRef를 사용하여 생성된 참조를 변경해도 컴포넌트의 렌더링이 다시 일어나지 않습니다.

예를 들어, 다음과 같은 코드에서는 useRef를 사용하여 input 요소에 대한 참조를 생성하고, 해당 참조를 사용하여 input 요소의 값을 변경합니다.

import { useRef } from 'react';

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

  function handleClick() {
    inputRef.current.value = 'New Value';
  }

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

위 코드에서는 useRef를 사용하여 input 요소에 대한 참조를 생성합니다. 그리고 handleClick 함수에서는 useRef로 생성된 참조를 사용하여 input 요소의 값을 변경합니다. 이렇게 하면, input 요소의 값이 변경되더라도 컴포넌트의 렌더링이 다시 일어나지 않습니다.

useRef가 필요한 상황

1. DOM 요소에 대한 참조를 만들어야 하는 경우

DOM 요소의 값을 참조하거나 변경해야 할 때 useRef를 사용합니다. 예를 들어, input 요소에 대한 참조를 만들어서 해당 요소의 값을 변경하는 등의 작업을 할 수 있습니다.

2. 이전 값을 유지하면서 컴포넌트를 다시 렌더링해야 하는 경우

컴포넌트를 다시 렌더링하면 컴포넌트의 상태가 초기화됩니다. 하지만 useRef를 사용하여 생성된 참조는 컴포넌트의 렌더링과 관계없이 일관된 값을 유지합니다. 따라서, 이전 값을 유지하면서 컴포넌트를 다시 렌더링해야 할 때 useRef를 사용합니다.

3. 함수형 컴포넌트에서 인스턴스 변수를 사용해야 하는 경우

함수형 컴포넌트에서는 인스턴스 변수를 사용할 수 없습니다. 하지만 useRef를 사용하여 생성된 참조는 컴포넌트의 렌더링과 관계없이 일관된 값을 유지합니다. 따라서, 함수형 컴포넌트에서도 useRef를 사용하여 인스턴스 변수를 사용할 수 있습니다.