The React Hooks - useRef Hook

01.useRef를 사용하면 렌더링 간에 값을 유지할 수 있다.

w3schools는 이렇게 정의한다 - 업데이트 시에 re-rendering이 발생하지 않는 변경 가능한 값을 저장하는 데 사용할 수 있다.

 

무슨 말인지 잘 모르겠어서 추가로 찾아보았다.

function ManualCounter() {
  const [count, setCount] = useState(0);

  let intervalId;

  const startCounter = () => {
    // 💥 매번 새로운 값 할당
    intervalId = setInterval(() => setCount((count) => count + 1), 1000);
  };
  const stopCounter = () => {
    clearInterval(intervalId);
  };
  
  이런 식으로 코딩을 한다했을 때 intervalId를 두 함수에서 참조하기 위해 밖에 선언해야하는데 그러면
  매번 새로운 값으로 바뀌게 된다.
  이러한 일을 해결하기 위한 함수가 useRef 훅 함수이다.

useRef 함수는 current 속성을 가지고 있는 객체를 반환하는데, 인자로 넘어온 초기값을 current 속성에 할당한다. 이 current 속성은 값을 변경해도 상태를 변경할 때 처럼 React 컴포넌트가 다시 랜더링되지 않는다.

React 컴포넌트가 다시 랜더링될 때도 마찬가지로 이 current 속성의 값이 유실되지 않습니다.

출처 : https://www.daleseo.com/react-hooks-use-ref/

React Hooks: useRef 사용법

 

02. useRef로 특정 DOM 선택하기

• javascript에서 특정 Dom을 선택하는 역할 ex) getElementById, querySelector
• 특정 DOM에 접근할 때 사용한다.
• 외부 라이브러리 사용할때 유용하다.
• 원하는 위치에 ref={} 의 형태로 작성하여 Ref객체를 만들고,
  우리가 선택하고 싶은 DOM에 ref값으로 설정해줘야 한다,
  그러면 Ref객체의 .current값은 우리가 원하는 DOM을 가르키게 된다.
• 포커스를 잡으려면 nameInput.current.focus() 형태로 작성하면 된다.

03. Tracking State Changes

useRef Hook을 사용하여 이전 상태 값을 추적할 수도 있다.
이는 렌더링 간에 useRef 값을 지속할 수 있기 때문이다.

예제로 다음 사이트 맨 아래 코드를 보면 이해하기가 쉽다.

출처 : https://www.w3schools.com/react/react_useref.asp

React useRef Hook