React / useRef

제어 컴포넌트 vs useRef

 

useState

• 제어 컴포넌트에서 사용
• 상태가 변화할때마다 리렌더링 발생
• 입력 값의 실시간 상태 반영이 필요하거나 다른 컴포넌트에 영향을 줄 때 사용
• 폼 검증, 실시간 검색, UI 반응 등에 사용

 

useRef

• 비제어 컴포넌트에서 사용
• 입력값은 DOM에서 직접 가져옴
• 렌더링과 무관해서, 리렌더링돼도 초기화되지 않는 변수가 필요할 때 사용
• 최종 입력 값만 필요할 때, 성능을 향상시키고 싶을 때는 굳이 사용하지 않아도 됨
• 로그인 창, 비밀번호 입력 등에 사용
• 리액트는 기본적으로 가상 DOM을 통해 실제 DOM을 조작하기 때문에 기본 작동 방식과 다르기 때문에 꼭 필요할 때만 써야함

 

 

---

 

 

useRef

사용방법

1. DOM 주소를 담아줄 공간 생성

const domRef = useRef(null) // 처음에는 null을 넣어 빈 공간으로

 

2. DOM 주소를 담고 싶은 요소에 ref 속성으로 연결

<element ref={domRef} />

 

3. current 속성으로 요소에 접근

domRef.current // = <element ref={domRef} />

 

 

---

 

예시 - 리렌더링 없이 실제 DOM에 접근

 

useState와 useRef를 사용해서 입력값을 가져온다고 할 때, 렌더링에서 차이를 알아볼 수 있다.

 

1. useState 사용

function App() {
  return (
    <>
      <ControlledInput />
    </>
  );
}

// 제어 컴포넌트
const ControlledInput = () => {
  const [inputValue, setInputValue] = useState('');
  console.log('리렌더링');
  return (
    <input value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
  );
};

 

감자튀김 네글자만 썼는데 리렌더링이 여러번 발생된 걸 확인할 수 있다

 

 

2. useRef 사용

function App() {
  return (
    <>
      <ControlledInput />
      <hr />
      <UseRefInput />
    </>
  );
}

const UseRefInput = () => {
  const inputRef = useRef(null);
  console.log('useRef 리렌더링');
  return (
    <>
      <input ref={inputRef} />
    </>
  );
};

 

처음 화면이 렌더링됐을 때 외에는 input에 값을 입력해도 렌더링이 일어나고 있지 않다.

 

input의 value는 다음과 같이 접근할 수 있다.

 

const UseRefInput = () => {
  const inputRef = useRef(null);
  console.log('useRef 리렌더링');
  const getInputValue = () => {
    console.log(inputRef.current.value);
  };
  return (
    <>
      <input ref={inputRef} />
      <button onClick={getInputValue}>input 값 가져오기</button>
    </>
  );
};

 

이 때 inputRef.current 를 출력하면 <Input>만 덜렁..나온다

 

 

위의 값을 가져온 것과 같은 방식으로, useRef로 input요소를 누르지 않고도 focus 효과를 줄 수 있다. (대신 예제에서는 버튼을 누르긴 한다....)

 

function App() {
  return (
    <>
      <UseRefInput />
    </>
  );
}
// useRef
const UseRefInput = () => {
  const inputRef = useRef(null);
  console.log('useRef 리렌더링');
  const getInputValue = () => {
    console.log(inputRef.current.value);
  };

  // input에 focus하는 효과!
  const focusInput = () => {
    inputRef.current.focus();
  };
  return (
    <>
      <input ref={inputRef} />
      <button onClick={getInputValue}>input 값 가져오기</button>
      <button onClick={focusInput}>input에 focus하기</button>
    </>
  );
};

 

 

---

 

예시 - 리렌더링과 관계없이 초기화 되지 않는 변수

 

useRef는 컴포넌트의 렌더링과 관계없이 값이 유지되게 할 수 있다.

• numberRef라는 변수에 useRef를 생성
• keep value 버튼 - 현재 counter의 값을 numberRef에 저장
• show value 버튼 - numberRef에 저장된 값을 콘솔로 출력

function App() {
  return (
    <>
      <Counter />
    </>
  );
}

// counter 값을 특정 시점에서 저장하는 useRef 예제
const Counter = () => {
  const [counter, setCounter] = useState(0);
  const numberRef = useRef(null);

  return (
    <>
      <div>counter : {counter}</div>
      <button onClick={() => setCounter((prev) => prev + 1)}>+</button>
      <button onClick={() => setCounter((prev) => prev - 1)}>-</button>
      <button onClick={() => (numberRef.current = counter)}>keep value</button>
      <button onClick={() => console.log(numberRef.current)}>show value</button>
    </>
  );
};

 

useRef를 사용하면 아무리 리렌더링돼도 useRef가 참조하는 메모리는 동일한 객체를 유지하기 때문에 numberRef.current의 값이 유지된다. 물론 useRef에 값을 저장해도 렌더링되지 않으며 따라서 컴포넌트가 그대로 유지된다.

 

물론 값을 저장하는 새 useState 객체를 만들어서 다음과 같이 표현해줄 수도 있다. 

const [savedValue, setSavedValue] = useState(null);
// 생략.... 
<button onClick={() => setSavedValue(counter)}>keep value</button>

 

이 경우에는 버튼을 누를때마다 컴포넌트가 리렌더링돼기 때문에 리렌더링이 굳이 필요하지 않다면 useRef가 효율적이다.