[ React ] 03. useRef

useRef

 

1. useRef

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

 

const ref = useRef(initialValue)

 

직접 DOM 요소에 접근해야 할 때, useRef 훅을 사용하여 DOM 요소에 직접 접근이 가능합니다.
useRef 훅이 반환하는 ref 객체를 이용해서 자식 요소에 접근이 가능합니다.

​

공식문서 내용
useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다
useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 “상자”와 같습니다.

 

 

useRef 설명

useRef는 React에서 제공하는 Hook 중 하나로, 주로 다음과 같은 두 가지 용도로 사용됩니다:

1. DOM 요소에 직접 접근: useRef를 사용하면 특정 DOM 요소에 직접 접근할 수 있습니다. React에서 일반적으로 상태(state)를 사용하여 UI를 업데이트하지만, useRef는 DOM 요소를 조작하거나 값이 변경되더라도 렌더링을 발생시키지 않아야 하는 값을 저장할 때 유용합니다.
2. 변수 저장 (mutable value): 렌더링 간에 유지되지만, 변경될 때마다 컴포넌트가 다시 렌더링되지 않는 값을 저장하는 데 사용할 수 있습니다. 이는 useState와 달리 값이 변경되어도 재렌더링을 일으키지 않는다는 점에서 유용합니다.

useRef의 특징

• 리렌더링하지 않음: useRef로 설정된 값이 변경되어도 컴포넌트는 리렌더링되지 않습니다.
• .current 프로퍼티: useRef로 생성된 객체는 current라는 프로퍼티를 가지고 있으며, 이 프로퍼티를 통해 저장된 값을 참조하거나 변경할 수 있습니다.
• 초기값 설정: useRef는 useRef(initialValue) 형식으로 초기값을 설정할 수 있습니다.

 

 

 

https://ko.legacy.reactjs.org/docs/hooks-reference.html#useref

Hooks API Reference – React

 

https://ko.legacy.reactjs.org/docs/refs-and-the-dom.html#gatsby-focus-wrapper

Ref와 DOM – React

 

 

공식문서내용

ref를 사용해야 할 때

Ref의 바람직한 사용 사례는 다음과 같습니다.

• 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때.
• 애니메이션을 직접적으로 실행시킬 때.
• 서드 파티 DOM 라이브러리를 React와 같이 사용할 때.

선언적으로 해결될 수 있는 문제에서는 ref 사용을 지양하세요.

예를 들어, Dialog 컴포넌트에서 open()과 close() 메서드를 두는 대신, isOpen이라는 prop을 넘겨주세요.

 

Ref를 남용하지 마세요

ref는 애플리케이션에 “어떤 일이 일어나게” 할 때 사용될 수도 있습니다. 그럴 때는 잠시 멈추고 어느 컴포넌트 계층에서 상태를 소유해야 하는지 신중하게 생각해보세요. 대부분의 경우, 상태를 소유해야 하는 적절한 장소가 더 높은 계층이라는 결론이 날 겁니다. 

 

 

 

https://react.dev/reference/react/useRef

useRef – React

 

 

형식)

import { useRef } from 'react';

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

 

  const inputRef = useRef(null);

  const intervalRef = useRef(0);

 

 

매개변수

• initialValuecurrent: ref 객체의 속성이 초기에 지정되기를 원하는 값입니다 . 모든 유형의 값이 될 수 있습니다. 이 인수는 초기 렌더링 후에는 무시됩니다.

useRef단일 속성을 가진 객체를 반환합니다.

• currentinitialValue: 처음에는 합격 으로 설정되어 있습니다 . 나중에 다른 것으로 설정할 수 있습니다. ref 객체를 refJSX 노드의 속성 으로 React에 전달하면 React는 해당 current속성을 설정합니다.

다음 렌더링에서는 useRef동일한 객체를 반환합니다.

 

주의사항

• 속성 을 변경할 수 있습니다 ref.current. 상태와 달리 변경 가능합니다. 그러나 렌더링에 사용되는 개체(예: 상태의 일부)를 보유하는 경우 해당 개체를 변경하면 안 됩니다.
• 속성 을 변경하면 ref.currentReact는 구성 요소를 다시 렌더링하지 않습니다. ref는 일반 JavaScript 객체이기 때문에 React는 언제 변경되는지 인식하지 못합니다.
• 초기화를 제외하고 렌더링 중에는 쓰거나 읽지 마십시오 . 이로 인해 구성 요소의 동작을 예측할 수 없게 됩니다.ref.current
• 엄격 모드에서 React는 우발적인 불순물을 찾는 데 도움을 주기 위해 구성 요소 함수를 두 번 호출 합니다. 이는 개발 전용 동작이며 프로덕션에는 영향을 주지 않습니다. 각 참조 개체는 두 번 생성되지만 버전 중 하나는 삭제됩니다. 구성 요소 기능이 순수하다면(되어야 하는 대로) 동작에 영향을 주어서는 안 됩니다.

 

 

 

특수문자