소개

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 (
    

      
Count: {countRef.current}
      Increment
    
  )
}

export default App

위의 예에서 버튼을 클릭하면 countRef를 증가시키는 증분 함수가 호출되지만 useRef를 업데이트하기 때문에

Count: {countRef.current}

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

import { useRef, useState } from 'react'

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

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

  return (
    

      
Count: {count}
      Increment
    
  )
}

export default App

useRef의 일반적인 사용 사례

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

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

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

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

  return(
    
  )
}

영구 값

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

성능 최적화

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

모범 사례 및 고려 사항

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

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

이와 같이 자체 구성 요소에 참조를 전달하려고 하면

const inputRef = useRef(null);

return ;

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

이 문제를 해결하려면 다음과 같이 맞춤 구성요소를 전달 참조로 래핑하세요.

const inputRef = useRef(null);

return ;

맞춤 구성요소:

import { forwardRef } from 'react';

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

export default MyInput;

결론

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