🎋useRef 훅 : 효율적인 컴포넌트 관리

🎋useRef 기초

useState vs useRef

• useState

  컴포넌트의 상태를 관리할 때 사용됩니다. 상태가 변할 때마다 컴포넌트를 다시 렌더링하고 싶을 때 주로 사용됩니다. 상태를 변경하면 해당 컴포넌트가 다시 렌더링됩니다.

• useRef

  이전 값과 새로운 값을 연결하고, 렌더링과는 무관하게 값이 유지되어야 할 때 사용됩니다. 리렌더링 없이 데이터를 참조할 수 있게 해주며, 주로 변하지 않는 값이나, 리렌더링을 유발하지 않아야 하는 참조를 저장하는 데 사용됩니다.

따라서 useState와 useRef는 서로 다른 용도를 가지고 있으며, 각각의 사용 사례에 따라 선택되어야 합니다.
useRef를 사용하는 일반적인 상황은 다음과 같습니다.

• 컴포넌트의 렌더링과 관련이 없는 값들을 저장할 때
• DOM 요소에 대한 참조를 저장할 때
• 렌더링 과정에서 값이 변경되어도 다시 렌더링되지 않아도 되는 경우

예제 : 포커스 관리

• 포커스를 자동으로 설정하려는 입력 필드에 useRef를 사용합니다.

function AutoFocusInput() {
  const inputRef = useRef();

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} />;
}

useEffect와 useRef를 조합해 컴포넌트가 마운트될 때 자동으로 입력 필드에 포커스를 줍니다

🚠적용한 기존코드

// 기존 useState 사용 코드
import { useState } from "react";

export default function Player() {
  // enteredPlayerName 상태를 저장하고 업데이트하기 위한 useState 훅
  const [enteredPlayerName, setEnteredPlayerName] = useState('');
  const [submitted, setSubmitted] = useState(false);

  // 입력 필드 값이 변경될 때마다 호출되는 함수
  function handleChange(event){
      setSubmitted(false);
      // 입력 필드에서 입력된 값을 상태로 설정
      setEnteredPlayerName(event.target.value);
  }

  function handleClick(){
      setSubmitted(true);
  }
  
  return (
    <section id="player">
      <h2>Welcome {submitted ? enteredPlayerName : "unknown entity"}</h2>
      <p>
        <input
          type="text"
          onChange={handleChange} // 입력 필드에 값이 바뀔 때마다 handleChange 함수 호출
          value={enteredPlayerName} // 입력 필드 값은 enteredPlayerName 상태와 동기화
        />
        <button onClick={handleClick}>Set Name</button> 
      </p>
    </section>
  );
}

입력 필드에서의 사용자 입력을 useState를 사용하여 상태로 관리하고 있습니다.
입력이 변할 때마다 handleChange 함수가 호출되어 상태를 업데이트하고, 이 상태 업데이트는 컴포넌트를 리렌더링합니다.
사용자가 버튼을 클릭하면, submitted 상태가 true로 설정되어, 입력된 이름이 화면에 표시됩니다.
이 방법은 상태 변경에 따른 컴포넌트의 반응을 직접적으로 확인할 수 있게 해줍니다.

🚠수정된 코드

// useRef를 사용한 코드
import { useState, useRef } from "react";

export default function Player() {
  // input 요소에 대한 참조를 생성
  const playerName = useRef();

  const [enteredPlayerName, setEnteredPlayerName] = useState('');

  function handleClick(){
    // ⭐참조를 통해 입력 필드에서 값을 가져와 상태 업데이트
    setEnteredPlayerName(playerName.current.value);
  }
  
  return (
    <section id="player">
      <h2>Welcome {enteredPlayerName || "unknown entity"}</h2> 
      <p>
        <input
          ref={playerName} // ⭐useRef 훅을 사용하여 생성된 참조를 input 요소에 할당
          type="text"
        />
        <button onClick={handleClick}>Set Name</button> 
      </p>
    </section>
  );
}

useRef는 DOM 요소에 직접적으로 접근할 수 있는 참조를 제공합니다.
입력 필드에 입력된 값은 상태로 관리되지 않고, 참조를 통해 직접 접근하여 값에 접근합니다.
handleClick 함수가 호출될 때만 입력 필드의 값을 읽어 상태를 업데이트하므로,
⭐입력 중에는 컴포넌트가 불필요하게 리렌더링되지 않습니다.
사용자의 입력이 내부 상태에 저장되지 않기 때문에, 상태 업데이트로 인한 성능 저하를 줄일 수 있습니다.

---

https://hanghae99.spartacodingclub.kr/blog/react-usestate-%EB%8C%80%EC%8B%A0-useref%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%95%BC-%ED%95%98%EB%8A%94-%EA%B2%BD%EC%9A%B0-20844