useRef

useRef란?

React에서 제공하는 훅으로, DOM요소나 컴포넌트의 인스턴스를 직접 참조할 수 있게 해준다

 

이러한 상황에서 유용하다!!

• DOM요소에 접근 : 'useRef' 를 사용하여 특정 DOM요소에 접근하고 그 요소의 속성을 직접 변경할 수 있다.
• 값 저장: 렌더링 간에 값에 저장하고 싶을 때 사용된다. 이 값은 컴포넌트가 리렌더링  되더라도 유지된다.
• 포커스 제어 : 폼 요소의 포커스를 설정하거나, 다른 이벤트를 제어할 때 유용하다.

 

useRef(initialValue)

 

컴포넌트의 최상위 레벨에서 useRef를 호출하여 ref를 선언한다.

import { useRef } from 'react';

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

 

 

매개변수

 

useRef를 사용할 때 초기값을 설정할 수 있는데, 이 초기값은 current라는 프로퍼티에 저장된다. 이 초기값은 어떤 유형의 값이든 될 수 있다.

 

• useRef를 처음 사용할 때 설정하는 초기값은 useRef가 처음 생성될 때만 사용된다.
• 한 번 설정된 후에는 컴포넌트가 다시 렌더링되더라도 이 초기값은 무시된다. 즉, 초기값은 useRef가 처음 초기화 될 때만 중요하다.
• 이후에는 current 프로퍼티를 통해 값을 변경하거나 접근할 수 있다.

 

반환값

 

useRef를 사용하면 current 라는 단일 프로퍼티를 가진 객체를 반환한다. 이 객체의 current 프로퍼티는 특정 값을 저장하는데 사용된다.

 

주요 point❗️

• 값 변경 가능 : 나중에 current 프로퍼티의 값을 다른 값으로 변경할 수 있다.
• JSX 노드의 ref 속성 : 이 객체를 JSX노드의 ref 속성에 전달하면, React가 자동으로 해당 DOM 요소를 current 프로퍼티에 설정한다.
• 동일한 객체 유지 : 컴포넌트가 다시 렌더링될 때도 useRef는 동일한 객체를 반환한다.

 

주의사항

 

ref.current 프로퍼티

• 변이 가능 :  ref.current 는 값을 자유롭게 변경할 수 있다. 이는 useState와는 다르게 변경될 때 마다 컴포넌트를 다시 렌더링 하지 않는다.
• React 인지 불가 : ref.current 가 변경되더라도 React는 이를 알지 못한다. 따라서 변경 시 컴포넌트가 다시 렌더링 되지 않는다.

상태 관리와의 차이점

• State : 상태를 변경하면 React가 이를 감지하고 컴포넌트를 다시 렌더링 한다.
• Ref : ref.current 는 그냥 객체 속성이기 때문에 변경되어도 React가이를 감지하지 않는다.

주의할 점

• 렌더링 중 사용 금지 : 렌더링 중에는 ref.current를 읽거나 쓰지 않는 것이 좋다. 이는 컴포넌트의 동작을 예측할 수 없게 만들 수 있다.
• Strict Mode : 개발모드에서는 React는 컴포넌트의 불순물을 찾기위해 함수를 두 번 호출한다. 이때 각 ref 객체도 두 번 생성되지만 하나는 버려진다. 컴포넌트 함수가 순수하다면 ( 부작용이 없다면 ) 문제되지 않는다.

여기서 부작용이란 > 함수가 외부 상태를 변경하거나, 함수 호출 시점에 따라 다르게 동작하는 것을 의미한다.

순수함수 > 호출될 때 마다 동일한 입력에 대해 동일한 출력을 반환하고, 외부 상태를 변경하지 않는다.