useRef란?

useRef 는 렌더링에 필요하지 않은 값을 참조할 수 있는 React Hook이다.

// GPT 가 제공해준 예시 코드
import { useRef } from 'react';

function MyComponent() {
  const myRef = useRef(initialValue);

  // myRef.current에 값 저장하기
  myRef.current = someValue;

  // myRef.current 값 참조하기
  console.log(myRef.current);

  // ...컴포넌트 코드 계속...
}

컴포넌트가 리렌더링되어도 저장된 값이 유지 된다.

useRef가 필요한 상황

1. DOM 노드에 직접 접근해야 하는 경우
   useRef를 사용하면 컴포넌트 내부에서 DOM 노드에 직접 접근할 수 있다.
   예를 들어, 특정 버튼을 클릭하면 모달을 열고 모달 내부의 input요소에 포커스를 맞추고 싶은 경우가 있다.

2. 이전 값과 새 값을 비교해야 하는 경우
   useRef를 사용하면 이전 값과 새 값을 비교할 때 유용하다.
   예를 들어, useEffect 훅에서 이전 상태값과 현재 상태값을 비교하여 특정 작업을 수행해야 하는 경우가 있다. (ex. 글 작성 중에 새로고침이나 뒤로가기를 제한하는 경우)

3. 자식 컴포넌트에게 함수를 전달해야 하는 경우
   useRef 를 사용하면 자식 컴포넌트에게 함수를 전달할 때 유용하다.
   예를 들어, 자식 컴포넌트가 스크롤 이벤트를 발생시키고, 부모 컴포넌트에서 이벤트를 처리해야 하는 경우가 있다.
   (ex. 자식 컴포넌트가 스크롤 이벤트를 발생시키고, 부모 컴포넌트에서 이벤트를 처리해야 하는 경우)

useRef 대신 다른 방법 사용

• useState 사용
• 콜백 함수를 사용
  부모 컴포넌트에서 콜백 함수를 선언하고, 이를 자식 컴포넌트에게 전달하여 사용할 수 있다.
• 클래스 컴포넌트에서의 인스턴스 변수 사용

useRef를 사용할 때 주의해야 할 점

• useRef 는 컴포넌트가 렌더링될 때마다 새로운 객체를 생성하지 않는다.
  따라서 useRef를 사용하여 생성된 객체를 변경하면 컴포넌트가 다시 렌더링 되지 않는다.
• useRef 를 사용하여 DOM 요소에 접근하려는 경우, 해당 요소가 마운트된 이후에 접근해야 한다.
  초기 렌더링 시에는 해당 요소가 아직 마운트되지 않았으므로, current 속성이 null 일 수 있다.
  따라서, 이러한 경우에는 useEffect 훅을 사용하여 해당 요소가 마운트된 이후에 useRef를 사용하여 접근해야 한다.
• 일반적으로 상태 관리를 위한 용도보다는 DOM 요소에 접근하는 용도로 사용된다.
  따라서, 상태 관리를 위해 useRef 를 사용하는 경우 이를 관리하기 위한 대안적인 방법을 고려해야 한다.

다른 방법을 사용하는 것 보다 useRef를 이용하는 장점

• DOM 요소에 직접 접근할 수 있다.
  예를 들어, DOM 요소의 크기나 위치, 텍스트 입력 창의 포커스 등을 제어할 수 있다.
• 컴포넌트의 내부 변수를 저장하고 관리할 수 있다.
  컴포넌트의 렌더링이 다시 수행되더라도 변수 값이 유지된다. 이를 활용하여 컴포넌트의 상태를 유지하거나 다양한 기능을 구현할 수 있다.
• React의 라이프사이클과 관계 없이 컴포넌트의 생명주기 내에서 일관된 동작을 보장한다.
  이는 useRef를 사용하여 상태를 저장하거나 함수를 전달하는 등의 작업에서 일관된 결과를 보장할 수 있다는 것을 의미한다.

---

상태관리는 무조건 useState로만 하는 줄 알았는데 useRef로도 할 수 있다는 것을 알았다. 특히 해당 훅을 사용하여 객체를 변경해도 컴포넌트가 리렌더링이 안된다는 사실을 이제 알았다.(평소에 잘 안써봤다.)
활용할 수 있는 부분이 많지 않은 것 같으면서도 많을 것 같다는 생각을 했다.