React useRef 쉽게 이해하기

우선 useRef를 쉽게 이해하려면 렌더링과 DOM에 대한 이해가 필요합니다.

 

• 렌더링: 사용자 인터페이스를 화면에 그리는 과정, React에서는 상태(state), 속성(Props) 변경이 발생하면 Component가 렌더링되어 변경된 내용을 화면에 반영합니다. 즉 화면이 새로 고쳐지는 과정을 의미합니다.

• DOM(Document Object Model): 구조적 표현을 메모리에 저장.. 이러면 어려우니까 웹 페이지에 모든 요소(element), 속성(attribute), 내용(content)를 조작할 수 있게 해주는 방식으로 생각하면 좋습니다.

 

useRef는 React의 Hook중 하나로, 렌더링 간 값을 ‘기억’할 수 있게 해주는 기능입니다. DOM 요소에 접근하기 위해 사용하기도 하지만, Component 내부에서 렌더링에 영향을 주지 않으면서 데이터를 저장할 수 있는 용도로 사용됩니다.

 

useState와 useRef는 비슷하지만 렌더링이 된다. 않된다로 나뉠 수 있습니다. useRef를 사용하면 값이 변해도 Component는 리렌더링되지 않습니다.

 

useRef 사용 예시

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

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

  const onButtonClick = () => {
    // input 창으로 이동됩니다.
    inputEl.current.focus();
  };

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

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

function TimerComponent() {
  const count = useRef(0);

  useEffect(() => {
    setInterval(() => {
      count.current += 1;
      console.log(`Timer: ${count.current}`);
    }, 1000);
  }, []); // 빈 배열을 넘겨서 마운트 시에만 effect를 실행합니다.

  return <div>Check the console for timer updates.</div>;
}