React의 추가 후크 - useRef()

이 블로그 게시물은 React Hooks에 대한 시리즈를 계속합니다.

React의 추가 후크 중 하나인 useRef()를 다룹니다.

useRef()란 무엇입니까?

useRef()는 변경 가능한 JavaScript 객체를 생성하고 반환하는 JavaScript 함수입니다.
이 후크는 일부 값을 수락하고 주어진 값을 가진 객체를 반환합니다.

아래에서 자세히 살펴보겠습니다.

useRef() 사용 방법 및 시기

이 후크를 사용하려면 먼저 다음과 같이 React 라이브러리에서 가져와야 합니다.

import {useRef} from 'react';

가져오기 없이 이 후크를 다음과 같이 사용할 수 있습니다. React.useRef() 저에게는 먼저 이 함수를 가져오고 분해한 다음 코드에서 필요할 때 사용하는 것이 더 편리합니다.

그런 다음 이 후크를 다음과 같이 설정할 수 있습니다.

const refBox = useRef(initialValue);

위의 기본 설정에서 상수 refBox를 가끔 호출하지 않았지만 개체를 ​​포함하는 상자로 간주할 수 있기 때문입니다. useRef()에 의해 생성된 개체는 .current 속성에 변경 가능한 값이 있습니다. 이 값은 후크에 전달된 initial value에 의해 생성됩니다.
참고: .current 속성을 변경해도 다시 렌더링되지 않습니다.

사용 사례

DOM 노드에 액세스하기

useRef()의 가장 인기 있는 사용 사례는 DOM 노드에 액세스하는 것입니다. React 요소의 ref prop으로 useRef()에서 얻은 값을 전달하면 React는 요소의 .current 속성을 해당 DOM 노드로 설정합니다. 이를 통해 입력 값을 가져오거나 포커스를 설정하는 등의 작업을 수행할 수 있습니다(예: 아래 양식).

import {useRef} from 'react';

const Form =() =>{

//Here we create ref for input field 
const nameRef = useRef();

//Here variable Name contains the current value of input field 
const name = nameRef.current.value; 

return(
    <>
      <label>
        Name:
        <input
          placeholder="name"
          type="text"
          ref={nameRef}  //here we add ref property to input 
        />
      </label>
      //Here we add an event which gets input focus when user clicks the button
      <button onClick={() => nameRef.current.focus()}>
        Focus Name Input
      </button>
  </>
)
}

2. 가치 저장
useRef() 후크를 구현하는 고유한 방법은 이를 사용하여 DOM 참조 대신 값을 저장하는 것입니다. 이러한 값은 너무 자주 변경할 필요가 없는 state이거나 구성 요소의 전체 다시 렌더링을 트리거하지 않아야 하는 state일 수 있습니다. 예를 들어 다음과 같이 토글 기능을 구현하려는 경우에 사용할 수 있습니다.

let toggled = useRef(false);

  const handleToggle  = () => {
    toggled.current = !toggled.current;
  }

return(
<>
   <label onMouseMove={handleToggle}></label>
</>
)

결론

useRef() 후크는 DOM 요소와 상호 작용하고 다시 렌더링을 트리거하지 않고 앱에 변경 정보를 저장하는 데 매우 편리한 옵션입니다. 그러나 useRef()는 필요할 때만 사용하는 것이 좋습니다.

제 블로그를 읽어주셔서 감사합니다. 부담없이 접속하거나 :)