React_05) useRef

park0eun·2022년 4월 27일
0

👉 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;
  • 위 코드를 실행시키면 두 개의 인풋을 모두 채운 뒤 초기화를 눌렀을 때 focusref={nameInput}를 적용시킨 앞의 인풋으로 맞춰진다.
  • 적용시키지 않을 때


useRef 로 컴포넌트 안의 변수 만들기

  • useRef() 를 사용할 때 파라미터를 넣어주면, 이 값이 .current값의 기본값이 된다.
  • 값 수정 할 때 : .current값을 수정
  • 값 조회할 때 : .current를 조회
profile
Front-end

0개의 댓글