React Hooks: useRef()

useRef 왜 사용하나?

- useState()나 useEffect() 처럼 자주 사용되지는 않음

- React 컴포넌트는 기본적으로 상태(state)가 변경될 때마다 다시 렌더링 됨

- 이때, 다시 render 되더라도 기존에 참조하고 있던 컴포넌트 함수 내의 값이 보존되어야 하는 경우!

 

useRef 특징

- current 속성을 가진 ref객체를 반환함

-> current 속성이란?

- 값을 변경해도 상태를 변경할 때처럼 React 컴포넌트가 다시 렌더링되지 않음

- React 컴포넌트가 다시 렌더링 될 때도 마찬가지로 current 속성의 값이 유실되지 않음

- 반환된 ref 객체는 컴포넌트의 전 생애주기를 통해 유지됨

- 이 객체의 current 속성을 통해 DOM 노드나 React 엘리먼트에 접근가능

- 순수 javascript 객체를 반환 -> 비제어 컴포넌트 제어 가능

 

 

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

 

useRef 사용하기

<div ref={myRef} />를 사용하여 React로 ref 객체를 전달한다면, React는 노드가 변경될 때마다 변경된 DOM 노드에 그것의 .current 프로퍼티를 설정할 것입니다.

Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공함

 

React에서 부모 컴포넌트가 자식과 상호작용할 수 있는 유일한 수단은 props.

자식을 수정하려면 새로운 props를 전달하여 자식을 다시 렌더링해야 함

But, 직접적으로 자식을 수정해야 하는 경우도 있음! (자식=React 컴포넌트의 인스턴스 / DOM element)

 

Ref의 바람직한 사용 사례

• 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때
• 애니메이션을 직접적으로 실행시킬 때
• 서드 파티 DOM 라이브러리를 React와 같이 사용할 때

 

ref와 focus를 통해 초기화 버튼 클릭시 다시 입력창으로 이동

//InputTest.js

import React, { useState, useRef } from 'react';

function InputTest() {
  const [text, setText] = useState('');
  const nameInput = useRef();

  const onChange = e => {
    setText(e.target.value)
  };

  const onReset = () => {
    setText('');
    nameInput.current.focus();
  };

  return (
    <div>
      <input
        name="name"
        onChange={onChange}
        value={text}
        ref={nameInput}
      />

      <button onClick={onReset}>초기화</button>
      <div>
        <b>내용: </b>
        {text}
      </div>
    </div>
  );
}

export default InputTest;