프레임워크/React

[React] useRef

은돌1113 2024. 3. 28. 15:20

🔗 출처

: 설명도 너무 깔끔하게 잘해주시고, 예제도 같이 따라 해볼 수 있어서 useRef에 대해서 어렵게 느껴진다면 시청해 보기 아주 좋을 것 같습니다!


🙅‍♂️ React에서 변수를 사용하지 못하는 이유

  • 값의 변화를 UI에 실시간으로 보여줄 수 없다.
  • 화면이 렌더링 되면 변수의 값이 초기화된다.

🥸 특징

: useState의 장점 + 변수의 장점을 합친 React Hook이다

  • 👉 useState의 특징
    • 렌더링 되도 값이 유지된다.
    • 변화를 실시간으로 화면에 보여줘야 하기 때문에 매번 렌더링이 일어난다. (렌더링이 많아지면 성능에 안 좋음)
  • 👉  변수의 특징
    • 렌더링 되면 값이 사라진다.
    • 변화를 실시간으로 화면에 보여주지 않아도 되기 때문에 성능에 좋다.
  • 👉  useRef의 특징
    • useState와 변수의 장점을 합쳐 만들어진 "값을 유지 시켜주는 변수"이다.
    • useState처럼 UI를 업데이트하지 않는다.

🖥️ useRef의 기능

  • 1️⃣ 저장 공간으로서의 기능
      로직에서 사용하는 값을 다룰 때 유용하다. (UI에 보여줄 필요는 없지만, 따로 값을 저장해야 하는 경우) 
    • useRef는 객체를 반환한다.
      → 객체에 있는 값에 접근하기 위해서는 current를 통해 접근한다.
        리렌더링이 일어나면 그때 ref의 값이 UI에 반영된다.
    • 사용 예시
      : 검색 엔진에서 이전과 동일한 검색어를 입력하는 경우처럼 이전 값을 저장해야 하는 경우 사용하기 좋다.
      (불필요한 서버 호출을 막아줄 수 있다.
  • 2️⃣ DOM 요소를 선택하는 기능
    : 아래 예시처럼 useRef를 사용하여 input에 값이 없는 상태에서 검색 버튼을 누를 경우 input에 focus 되는 기능을 만들 수 있다. (이 외에도 버튼을 눌렀을 때 상단으로 스크롤이 이동하는 기능이나, 애니메이션 효과 등을 구현할 수 있다.)
    import React, { useRef, useState } from "react";
    
    export default function Home() {
      const [searchText, setSearchText] = useState(null);
      const inputRef = useRef(null);
    
      const inputHandler = (e) => {
        setSearchText(e.target.value);
      };
    
      const searchHandler = () => {
        if (!searchText) {
          alert("검색어를 입력해주세요.");
          inputRef.current.focus();
        }
      };
    
      return (
        <div>
          <input type="text" ref={inputRef} onChange={inputHandler} />
          <button onClick={searchHandler}>검색</button>
        </div>
      );
    }