[React] useRef

🔗 출처

: 설명도 너무 깔끔하게 잘해주시고, 예제도 같이 따라 해볼 수 있어서 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>
    );
  }