사용법 이해Ref: 초보자 가이드

소개

useRef 란 무엇입니까?

useRef는 값이나 DOM 요소에 대한 지속적인 참조를 생성할 수 있는 React 후크입니다. 다시 렌더링을 트리거하는 상태를 관리하는 데 사용되는 useState와 달리 useRef는 주로 부작용이나 DOM 요소에 직접 액세스하는 데 사용됩니다.

useRef를 사용하는 이유

useRef 후크는 다음과 같은 경우에 특히 유용합니다.

• DOM 요소에 직접 액세스: useRef를 사용하여 DOM 요소에 대한 참조를 얻을 수 있으므로 다시 렌더링을 트리거하지 않고도 DOM 요소를 직접 조작할 수 있습니다.
• 지속적 값 생성: 상태와 달리 useRef로 생성된 값은 렌더링 간에 유지되므로 다시 렌더링을 트리거할 필요가 없는 데이터를 저장하는 데 이상적입니다.

useRef 후크 이해

useRef 후크는 .current 속성을 가진 객체를 반환합니다. useRef를 호출하면 인수로 전달한 값에 대한 영구 참조가 생성됩니다. 이 참조는 반환된 객체의 .current 속성에 저장됩니다.

useRef를 사용하여 참조 만들기

참조를 생성하려면 초기 값으로 useRef를 호출하기만 하면 됩니다.

import { useRef} from 'react'

const App = () => {
  const countRef = useRef(0)

  return (...)
}

export default App

위의 예에서 countRef는 초기값 0에 대한 참조입니다.

참조 값에 액세스

참조 값에 액세스하려면 .current 속성을 사용하여 countRef 객체를 호출하세요

import { useRef} from 'react'

const App = () => {
  const countRef = useRef(0)

  const increment = () => {
    countRef.current++
  }

  return (
    <div>
      <p>Count: {countRef.current}</p>
      <button onClick={increment}>Increment</button>
    </div>
  )
}

export default App

위의 예에서 버튼을 클릭하면 countRef를 증가시키는 증분 함수가 호출되지만 카운트는

Count: {countRef.current}

에서 업데이트되지 않습니다. useRef를 업데이트해도 useState와 같은 재렌더링이 발생하지 않기 때문입니다.

기대하는 결과를 얻으려면 아래 예시로 코드를 업데이트하세요.

import { useRef, useState } from 'react'

const App = () => {
  const countRef = useRef(0)
  const [count, setCount] = useState(0)

  const increment = () => {
    countRef.current++
    setCount(countRef.current)
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  )
}

export default App

useRef의 일반적인 사용 사례

DOM 요소에 직접 접근하고 조작하기

useRef 후크를 사용하여 html 요소의 속성에 액세스하고 변경할 수 있습니다

const App = () => {
  const inputRef = useRef(null)

  const handleFocus = () => {
    inputRef.current.focus()
  }

  return(
    <input ref={inputRef} />
  )
}

영구 값

useState나 변수와 달리 useRef는 캐시된 데이터나 구성 설정과 같은 재렌더링 간에 값과 데이터를 전달할 수 있습니다.

성능 최적화

어떤 경우에는 useRef를 사용하면 불필요한 재렌더링을 방지하여 구성요소 최적화에 도움이 될 수 있습니다. 예를 들어 많은 항목 목록을 렌더링하는 구성 요소가 있는 경우 useRef를 사용하여 이를 캐시하고 변경된 항목만 수정하고 다시 렌더링할 수 있습니다.

모범 사례 및 고려 사항

• 렌더링 중에는 ref.current를 쓰거나 읽지 마세요
• ref.current 속성을 변경할 수 있습니다
• ref.current 속성을 변경하면 React는 구성요소를 다시 렌더링하지 않습니다
• 정보는 공유되는 외부 변수와 달리 구성요소의 각 복사본에 대해 로컬입니다. 일반 변수와는 달리 재렌더링 간에 정보를 저장할 수 있습니다. 렌더링할 때마다 재설정됩니다.
• 대신 이벤트 핸들러나 효과에서참조를 읽거나 쓸 수 있습니다.
• ref를 사용하여 DOM 조작

사용자 정의 구성 요소에 참조를 전달합니다.

이렇게 자신의 컴포넌트에 참조를 전달하려고 하면

const inputRef = useRef(null);

return <MyInput ref={inputRef} />;

콘솔에 오류가 발생할 수 있습니다.
경고: 함수 구성요소에는 참조를 제공할 수 없습니다. 이 참조에 액세스하려는 시도는 실패합니다. React.forwardRef()를 사용하려고 하셨나요?

이 문제를 해결하려면 다음과 같이 사용자 정의 구성요소를 다음과 같이 전달Ref로 래핑하세요.

const inputRef = useRef(null);

return <MyInput value={value} ref={inputRef} />;

맞춤 구성요소:

import { forwardRef } from 'react';

const MyInput = forwardRef(({ value, onChange }, ref) => {
  return (
    <input
      value={value}
      onChange={onChange}
      ref={ref}
    />
  );
});

export default MyInput;

결론

useRef는 다시 렌더링 간 데이터 캐싱이나 DOM 요소 액세스와 같은 부작용 사용에 주로 사용되는 강력한 후크입니다. 성능 최적화와 React 애플리케이션의 특정 기능 달성을 위한 훌륭한 도구입니다.

위 내용은 사용법 이해Ref: 초보자 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!