[React] useRef 사용하기

useRef로 원하는 DOM 사용하기

리액트에서 사용하는 프로젝트에서 가끔씩 DOM을 직접 사용해야 하는 상황이 올 수 있다. 그래서 리액트에서는 ref를 사용한다. 함수형 컨포넌트에서 ref를 사용할때는 useRef라는 hook함수를 사용한다.

useRef로 관리하는 값은 바뀌어도 컴포넌트가 리렌더링되지 않는다.

클래스 컴포넌트에서는 React.createRef() 또는 콜백 함수로 사용한다.

사용방법은 아주 간단하다.

import React, {useState, useRef} from 'react'; useRef 불러오고

const nameInput = useRef(); 객체를 생성하여 useRef 호출해주고

<input name="name" placeholder="이름" onChange={onChange} value={name} ref = {nameInput} />

ref라는 값으로 원하는 DOM에다 설정해주고 나중에 해당 DOM을 선택하고 싶을때는

const onReset = () => { 
        setInputs({
            name: '',
            nickname: '',   
        });
        nameInput.current.focus();
    };

nameInput.current.focus(); 원하는 작업을 해주면 끝이다.

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

useRef는 DOM을 선택하는 용도 외에 컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리하는 기능이 있다. 이 부분에서 중요한 것은 useRef로 관리하는 값은 바뀌어도 컴포넌트가 리렌더링되지 않는다.

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

function App() {
  const users = [
    {
      id: 1,
      username: 'DevRappers',
      email: 'devrappers@gmail.com'
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com'
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com'
    }
  ];

  const nextId = useRef(4);
  const onCreate = () => {
    nextId.current += 1;
  };
  return <UserList users={users} />;
}

export default App;

---

const nextId = useRef(4);
  const onCreate = () => {
    nextId.current += 1;
  };

useRef를 사용할때 숫자인 파라미터를 넣어주면 이값이 .current의 기본값이 된다. nextId.current += 1;는 current가 1씩 증가한다.