[react/공부] useRef

useRef 알아보기

 

---

        useRef란? 

state와 마찬가지로 특정 값을 저장하지만, state와 다르게 값이 변경되어도 컴포넌트가 다시 렌더링되지 않는다. 즉, 렌더링과 관계없이 내부에서 값을 계속해서 유지하는 역할을 한다.

 

 

---

        코드 형태 

const ref = useRef(초기값);  // { current: 값 } 형태

 

 

---

        사용 예시 

01 기본 예시

import { useRef } from 'react';

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

  const increase = () => {
    countRef.current += 1;
    console.log(countRef.current);
  };

  return (
    <div>
      <p>버튼 클릭 횟수: {countRef.current} (화면에는 변동 없음)</p>
      <button onClick={increase}>클릭</button>
    </div>
  );
}

버튼을 클릭할 때마다 countRef의 값이 증가하지만, 컴포넌트가 리렌더링되지 않기 때문에 화면에는 반영되지 않는다.

즉, 화면에 영향을 주지 않는 변수 저장 용도로 사용할 수 있다.

 

 

02 포커스 제어

import { useEffect, useRef } from 'react';

function LoginForm() {
  const idRef = useRef(null);

  useEffect(() => {
    idRef.current.focus();  // 컴포넌트가 마운트되면 자동으로 input에 포커스
  }, []);

  return (
    <div>
      아이디: <input ref={idRef} />
    </div>
  );
}

idRef는 input 요소를 직접 가리키는 역할을 한다.

useEffect 안에서 idRef.current.focus()를 실행하면 input에 포커스가 자동으로 이동한다.

로그인 페이지에서 아이디 입력창에 자동으로 커서를 두거나, 그 이후에 비밀번호로 커서를 옮겨야 할 때 사용하면 좋을듯!

 

 

---

        어떤 상황에서 쓸까? 

렌더링 없이 변수 값을 유지하고 싶을 때 → 상태 변경이 필요 없고 단순히 값을 저장하는 경우
DOM 요소에 직접 접근할 때 → focus(), scroll(), play() 같은 메서드를 실행할 때
이전 값을 저장하고 비교할 때 → useEffect 내부에서 이전 값을 참조하는 용도로 활용 가능

 

---

코드가 알면 알수록 정말 다양하다.

활용도가 있고, 또 높은데 생각도 못했던 게 나올때마다 신기하다.

뭔가 양이 많아져서 내가 잘 활용할 수 있을진 모르겠지만 킵고잉,,