React_05) useRef

박영은·2022년 4월 27일

React useRef

👉 useRef

useRef의 사용

1) 특정 DOM 선택시 사용.

리액트에서는 DOM 을 선택할 때 ref 를 사용한다.
함수형 컴포넌트 : useRef 라는 Hook 함수를 사용
클래스형 컴포넌트 : 콜백 함수를 사용 or React.createRef함수 사용.

cf) JavaScript에서는 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택한다.

2) 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리할 때 사용.

useRef 로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않음.
리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그다음 렌더링 이후로 업데이트된 상태를 조회할 수 있지만, useRef 로 관리하는 변수는 설정 후 바로 조회할 수 있다.

3) 리렌더링 방지차원에서 사용.

컴포넌트가 렌더링 = 함수(컴포넌트)를 호출하여 실행되는 것
( 함수가 실행될 때마다 내부에 선언되어 있던 표현식(변수나 또 다른 함수 등)도 매번 렌더링 됨)컴포넌트는 자신의 state가 변경되거나, 부모에게서 받는 props가 변경되었을 때마다 리렌더링 됨.
useRef 로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않음
= 리렌더링 방지 good

ex)

import { useState, useRef } from "react";

function App() {
  // ------------------------------------여러 인풋 관리
  const [inputs, setInputs] = useState({
    name: "",
    nickname: "",
  });
  const nameInput = useRef();
  const { name, nickname } = inputs;

  const onChangeInputs = (e) => {
    const { value, name } = e.target;
    setInputs({
      ...inputs, 
      [name]: value,
    });
  };
  const onResetInputs = () => {
    setInputs({
      name: "",
      nickname: "",
    });

    nameInput.current.focus(); 👈
  };
  return (
    <div>
      {/* <input type="text" onChange={onChange} value={text} />
      <button onClick={onReset}>초기화</button>
      <div>입력값 : {text}</div> */}
      <hr />
      <input
        name="name"
        placeholder="이름"
        onChange={onChangeInputs}
        value={name}
        ref={nameInput} 👈
      />
      <input
        name="nickname"
        placeholder="닉네임"
        onChange={onChangeInputs}
        value={nickname}
      />
      <button onClick={onResetInputs}>초기화</button>
      <div>
        <b>입력값: </b>
        {name} (= {nickname} )
      </div>
    </div>
  );
}

export default App;