useRef 후크 설명

React의 useRef 후크는 DOM 요소 또는 구성 요소의 전체 수명 주기 동안 지속되는 다른 값에 대한 변경 가능한 참조를 생성할 수 있는 강력한 기능입니다. 사용 사례와 함께 작동 방식에 대한 자세한 설명은 다음과 같습니다.

useRef란 무엇인가요?

• 영구 저장소: useRef는 업데이트 시 다시 렌더링을 트리거하지 않는 변경 가능한 참조를 보유하는 방법을 제공합니다. 이는 상태 변수를 업데이트하면 구성 요소가 다시 렌더링되는 상태와 다릅니다.

• 변경 가능한 객체 반환: useRef(initialValue)를 호출하면 수정할 수 있는 현재 속성이 있는 변경 가능한 객체가 반환됩니다. useRef에 전달하는 초기 값은 current로 설정되지만 언제든지 current를 변경할 수 있습니다.

기본 구문

const myRef = useRef(initialValue);

사용예Ref

다음은 useRef를 사용하여 DOM 요소에 액세스하는 간단한 예입니다.

import React, { useRef } from 'react';

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

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

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

export default FocusInput;

예시 설명

1. Ref 만들기: const inputRef = useRef(null); 입력 요소에 대한 참조를 보유하기 위한 참조를 생성합니다.

2. Ref 할당: 입력 요소의 ref 속성이 inputRef에 할당됩니다. 이를 통해 React는 입력 DOM 요소를 inputRef의 현재 속성에 연결할 수 있습니다.

3. Ref 액세스: 버튼을 클릭하면 focusInput 함수는 inputRef.current를 통해 입력 요소에 액세스하고 해당 요소에 대해 focus()를 호출합니다.

사용 사례

1. DOM 요소 액세스: 예시에서 볼 수 있듯이 useRef는 일반적으로 DOM 요소에 직접 액세스하고 상호작용하는 데 사용됩니다.

2. 변경 가능한 값 저장: useRef를 사용하면 타이머 ID나 이전 값과 같이 변경 시 다시 렌더링할 필요가 없는 변경 가능한 값을 저장할 수 있습니다.
   

   const timerRef = useRef();

   const startTimer = () => {
     timerRef.current = setTimeout(() => {
       // some action
     }, 1000);
   };

   const stopTimer = () => {
     clearTimeout(timerRef.current);
   };

1. 렌더링 전반에 걸쳐 값 유지: 상태와 달리 useRef에 보관된 값은 다시 렌더링할 때 재설정되지 않습니다. 이는 콜백이나 효과에 사용되는 값을 추적하는 데 유용할 수 있습니다.

2. 타사 라이브러리와 통합: DOM을 직접 조작하는 타사 라이브러리를 사용할 때 useRef는 해당 DOM 노드에 대한 참조를 유지하는 방법을 제공할 수 있습니다.

useState와의 비교

• 재렌더링: useState로 상태 변수를 업데이트하면 구성요소의 재렌더링이 트리거되지만, useRef를 업데이트하면 그렇지 않습니다.

• Storage: 구성 요소 렌더링에 영향을 주지 않는 값에는 useRef를 사용하고, 영향을 미치는 값에는 useState를 사용해야 합니다.

기억해야 할 핵심 사항

• useRef는 DOM 요소뿐만 아니라 모든 값을 보유할 수 있습니다.
• 현재 속성은 다시 렌더링하지 않고도 자유롭게 업데이트할 수 있습니다.
• DOM 노드에 액세스하거나 렌더링을 트리거할 필요가 없는 변경 가능한 값을 저장하는 데 적합합니다.

이러한 개념을 이해하면 React 애플리케이션에서 useRef 후크를 효과적으로 활용할 수 있습니다! 구체적인 사용 사례나 useRef에 대한 질문이 있으면 언제든지 문의하세요!

위 내용은 useRef 후크 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!