[React] useRef

무한스크롤 기능 구현할때에 썼던 훅인데 겸사겸사 복습~

useRef 기본 설명

useRef는 함수형 컴포넌트에서 DOM 요소에 접근하거나 값을 저장할 때 사용되는 훅임. useRef를 호출하면 Ref 객체를 반환함. Ref 객체는 .current 프로퍼티를 가지며, 여기에 초기값이 저장됨. 이 객체는 컴포넌트의 생애주기 동안 값이 유지됨.

주요 사용 사례

1. 값 저장

useRef는 상태(state)와 비슷하게 값을 저장하는 데 사용됨. 그러나 상태와 달리 값이 변경되어도 컴포넌트를 다시 렌더링하지 않음. 따라서 불필요한 렌더링을 막을 수 있음.

import React, { useRef } from 'react';

function Counter() {
  const countRef = useRef(0);

  const increment = () => {
    countRef.current++;
    console.log(`Count: ${countRef.current}`);
  };

  return (
    <div>
      <button onClick={increment}>Increment Count</button>
    </div>
  );
}

2. DOM 요소 접근

useRef는 DOM 요소에 직접 접근할 수 있음. 예를 들어, 로그인 화면에서 입력 필드에 자동으로 포커스를 맞추는 데 사용됨.

import React, { useRef, useEffect } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  useEffect(() => {
    inputEl.current.focus();
  }, []);

  return (
    <div>
      <input ref={inputEl} type="text" />
      <button onClick={() => inputEl.current.focus()}>Focus the input</button>
    </div>
  );
}

State와 useRef의 차이

상태 변경과 렌더링

상태 값이 변경되면 컴포넌트가 다시 렌더링됨. 함수형 컴포넌트는 함수이므로 렌더링 시 함수가 다시 호출됨. 내부 변수들이 다시 초기화됨.

useRef의 장점

useRef는 값이 변경되어도 렌더링을 발생시키지 않음. 따라서 값이 자주 변경되지만 렌더링을 발생시키지 않아야 할 때 유용함.

정리

• useRef는 값이 변경되어도 컴포넌트를 다시 렌더링하지 않음.
• DOM 요소에 접근할 때 유용함.
• state와 달리 값이 변경되어도 렌더링을 발생시키지 않음.