240818 React useRef

01. useRef란?

📚 값을 저장하고 활용하는 방법 중 하나 ( useState 랑 비슷? )

(1) useRef hook 소개

Re-rendering과 상관없이 값을 기억하기 위해 사용되는 것
💨 자바스크립트 DOM API를 직접사용하지 않고 DOM 요소를 다루기 위한 용도로 자주 사용

(2) 사용 방법

import "./App.css";
import { useRef } from "react";

function App() {
  const ref = useRef("초기값");
  console.log("ref", ref);

  return (
    <div>
      <p>useRef에 대한 이야기에요.</p>
    </div>
  );
}

export default App;

변경도 가능

import "./App.css";
import { useRef } from "react";

function App() {
  const ref = useRef("초기값");
  console.log("ref 1", ref);

  ref.current = "바꾼 값";
  console.log("ref 1", ref);

  return (
    <div>
      <p>useRef에 대한 이야기에요.</p>
    </div>
  );
}

export default App;

💡 이렇게 설정된 ref 값은 컴포넌트가 계속해서 렌더링 되어도 unmount 전까지 값을 유지합니다! (중요)

이러한 특징들 때문에 useRef는 다음 용도로 사용된다.

1. 저장공간
   state와 비슷한 역할을 하지만 변화가 일어나면 랜더링이 일어나는 state와 달리, ref 저장한 값은 랜더링을 일으키지 않음 => ref의 값이 변해도 내부 변수들이초기화 되는 것을 막을 수 있다.

즉!!
state는 리렌더링이 꼭 필요한 값을 다룰 때 쓰면 된다.
ref는 리렌더링을 발생시키지 않는 값을 저장할 때 사용한다.

2. DOM
   렌더링 되자마자 특정 input이 focusing 돼야 하는 등, DOM 요소를 핸들링해야 하는 순간이라면 useRef를 사용하는 것이 좋은 선택지

02. 예제 코드로 특징 살펴보기

(1) state vs ref

state는 변경되면 랜더링이 되고, ref는 변경되어도 렌더링이 안된다 💨

아래 코드에서
plusStateCountButtonHandler 와 plusRefCountButtonHandler 는 다르게 동작한다.

import "./App.css";
import { useRef, useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  const countRef = useRef(0);

  const plusStateCountButtonHandler = () => {
    setCount(count + 1);
  };

  const plusRefCountButtonHandler = () => {
    countRef.current++;
  };

  return (
    <>
      <div>
        state 영역입니다. {count} <br />
        <button onClick={plusStateCountButtonHandler}>state 증가</button>
      </div>
      <div>
        ref 영역입니다. {countRef.current} <br />
        <button onClick={plusRefCountButtonHandler}>ref 증가</button>
      </div>
    </>
  );
}

export default App;

(2) DOM 접근

<input /> 태그에는 ref라는 속성이 있다. 이걸 통해 해당 DOM 요소로 접근할 수 있다 wow

1. 사용 화면 만들어주기 (아이디/비밀번호 입력 받기)
   

import "./App.css";

function App() {
  return (
    <>
      <div>
        아이디 : <input type="text" />
      </div>
      <div>
        비밀번호 : <input type="password" />
      </div>
    </>
  );
}

export default App;

2. useRef 사용하여 포커싱 주기
   

import { useEffect, useRef } from "react";
import "./App.css";

function App() {
  const idRef = useRef("");

  // 렌더링이 될 때
  useEffect(() => {
    idRef.current.focus();
  }, []);

  return (
    <>
      <div>
        아이디 : <input type="text" ref={idRef} />
      </div>
      <div>
        비밀번호 : <input type="password" />
      </div>
    </>
  );
}

export default App;

아이디가 10자리 입력되면 자동으로 비밀번호 필드로 이동하는 코드?!

import { useEffect, useRef, useState } from "react";
import "./App.css";

function App() {
  const idRef = useRef("");
  const pwRef = useRef("");

  const [id, setId] = useState("");

  const onIdChangeHandler = (event) => {
    setId(event.target.value);
  };

  // 렌더링이 될 때
  useEffect(() => {
    idRef.current.focus();
  }, []);

  // 왜 useEffect 안에 놓았을까요?
  useEffect(() => {
    if (id.length >= 10) {
      pwRef.current.focus();
    }
  }, [id]);

  return (
    <>
      <div>
        아이디 :
        <input
          type="text"
          ref={idRef}
          value={id}
          onChange={onIdChangeHandler}
        />
      </div>
      <div>
        비밀번호 : <input type="password" ref={pwRef} />
      </div>
    </>
  );
}

export default App;

id.length ≥ 10 이 로직을 useEffect 안에 넣었는지?
=> 배치 업데이트