리액트 - useRef (22.11.18 TIL)

ref 전달이란 컴포넌트를 통해 자식 중 하나에 ref 를 자동으로 전달하는 기법이다. ref 란 무엇일까?

HTML 을 작성할 때, div 등의 DOM 요소에 이름을 달 경우 <div id="my-id"> 와 같이 id 를 사용한다. 이렇게 하면 특정한 id 에 해당하는 DOM 요소에만 스타일을 따로 적용하거나, 자바스크립트에서 해당 DOM 요소에 접근하여 여러 가지 작업을 할 수 있다.

이렇게 HTML 을 작성할 때 이렇게 id 를 붙이는 것처럼, 리액트에서도 DOM 을 선택해 직접 접근하기 위해 ref 를 사용한다.

ref 를 사용해야 할 때 (리액트에서 state 로만 해결할 수 없고, DOM 을 반드시 직접 건드려야 할 때)

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

useRef 사용하기

함수 컴포넌트에서는 useRef 라는 hook 을 사용하여 ref 를 활용하게 된다. useRef 는 리렌더링 하지 않고 컴포넌트의 속성만 조회 & 수정한다.

useRef hook 은 current 속성을 가지고 있는 객체를 반환하는데, 인자로 넘어온 초기값을 current 속성에 할당한다. 이 current 속성은 값을 변경해도 상태를 변경할 때 처럼 리액트 컴포넌트가 다시 렌더링되지 않는다. 리액트 컴포넌트가 다시 렌더링될 때도 마찬가지로 이 current 속성의 값이 유실되지 않는다.

1. 컴포넌트에 focus 를 위치시킬 필요가 있는 경우

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

function InputTest() {
  const [text, setText] = useState('');
  const nameInput = useRef();   //ref 객체를 만들어 준다.

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

  const onReset = () => {
    setText('');
    
    //ref 객체의 current 값은 우리가 선택하고자 하는 DOM 을 가리킨다.
    //그리고 포커싱을 해주는 DOM API focus() 를 호출한다.
    nameInput.current.focus();
  };

  return (
    <div>
      <input
        name="name"
        onChange={onChange}
        value={text}
        ref={nameInput}   //선택하고 싶은 DOM 에 속성으로 ref 값을 설정해준다.
      />

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

2. 속성 값을 초기화(clear) 할 필요가 있는 경우

예를 들어, 카운터의 값을 0으로 초기화 할 필요가 있을 때 사용한다.  (ex. 타이머 0으로 만들기)  setInterval 이나 setTimeout과 같은 함수는 clear 시켜주지 않으면 메모리를 많이 소모하기 때문이다.

3. useRef 로 컴포넌트 안의 변수 관리하기

리렌더링을 하지 않으면서 컴포넌트의 속성 정보를 조회하거나 수정할 때 사용한다.

import React, { useRef } from 'react';
import UserList from './UserList';

function App() {
  const users = [
    {
      id: 1,
      username: 'subin',
      email: 'subin@example.com'
    },
    {
      id: 2,
      username: 'user1',
      email: 'user1@example.com'
    },
    {
      id: 3,
      username: 'user2',
      email: 'user2@example.com'
    }
  ];
	
  //배열의 고유값 변수로 nextId 를 설정해주고, useRef() 파라미터로 다음 id 가 될 숫자 4를 넣어준다.
  //파라미터 값을 넣어주면 해당 값이 변수의 current 값이 된다.
  //그리고 nextId 변수를 수정하거나 조회할 때 current 값을 수정하거나 조회한다.
  const nextId = useRef(4);
  const onCreate = () => {
  
    //배열에 새로운 항복 추가하는 로직
    
    //변수에 1씩 더하여 업데이트 한다.
    nextId.current += 1;
  };
  return <UserList users={users} />;
}

export default App;

 

 

참고:

Ref와 DOM – React

Ref 전달하기 – React

 

[React] useRef() 는 언제 사용하는가?