[useRef] 특정 DOM 접근, 컴포넌트 내부 변수 생성

HTML, JS 에서 특정 DOM을 선택해야 할 때 getElementByid, QuerySelector 와 같은 Dom Selector를 사용했었다.

리액트에서 특정 DOM을 선택할 땐 ref를 사용한다.

함수형 컴포넌트
ref를 사용할 땐 hooks의 useRef 함수 사용

클래스형 컴포넌트
React.createRef() 나 콜백함수를 사용한다.

1️⃣ 특정 DOM 접근 예제

이전에 작성했던 inputSample 파일에서 초기화 버튼을 눌렀을 때,

포커스가 이름을 입력하는 인풋으로 이동하게 하고 싶을 때 직접 DOM으로 접근해야 한다.

1. useRef 객체 nameInput을 만들어준다.
2. 접근하고 싶은 DOM에 ref를설정해준다.
3. nameInput.current로 지정한 DOM에 접근할 수 있다.

import {useRef} from 'react';

// nameInput 객체 만들기
const nameInput = useRef();

const oninit= () => {
        setInputs({
            name: '',
            nickname: ''
        });
  	//useRef.current로 현재 DOM에 접근
        nameInput.current.focus();
    };

return(
<div>
    <input 
      name="name" 
      placeholder="이름" 
      onChange={onChangefunc} 
      value={name}
      //내가 접근하고 싶은 DOM에 ref를 설정
      ref = {nameInput}
     />
</div>
)

2️⃣ 컴포넌트 내부 변수 예제

변수를 선언할 때, 단순히 let으로 만들게되면 다음 리렌더링 때 초기화 된다.

컴포넌트 안에서 유지하고 싶은 변수를 만드려면
useState로도 할 수 있다.
단, useState로 선언한 변수는 변수의 상태를 바꾸게 되면 컴포넌트가 리렌더딩 된다.

변수의 값이 바뀌더라도 리렌더링 되지 않게 하고 싶으면 useRef를 사용하면 된다.

🤔 그 컴포넌트 내부 변수를 언제 쓰는데요?

setTimeout, setInterval의 id, 외부 라이브러리를 사용하여 생성된 인스턴스, scroll 위치 등..

‣ 특정 값이 바뀌어도 컴포넌트가 리렌더링 되는 것을 원하지 않을 때
‣ 컴포넌트가 리렌더링 되어도 어떤 값을 기억하고 사용하고 싶을 때

User들의 이름과 이메일을 UserList로 묶고,
각 User의 고유번호를 관리하는 코드를 작성해보자

userList의 Props로 users 배열을 주었다.
고유번호가 바뀐다고 해서 컴포넌트가 굳이 리렌더링 될 필요는 없다.

//UserList.js
function User({user}){
    return(
        <div>
            <b>{user.username}</b> 
            <span>({user.email})</span>
        </div>
    );
}

function UserList({users}){ ... }

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

const users= [
    {
        id: 1,
        username: 'doyeon',
        email: 'uoayop@kakao.com'
    },
    {
        id: 2,
        username: 'woong',
        email: 'woong@mungmung.com'
    },
    {
        id: 3,
        username: 'woody',
        email: 'andy@friend.com'
    }
  ];

return (
    <>
      <UserList users={users}/>
    </>
  );
}

UseRef로 nextId 변수를 만들고, 그 초기값은 4라고 지정해주었다.
유저가 추가될 때마다 UseRef의 값이 1씩 증가하도록 해주었다.

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

정리

• hooks인 useRef 함수를 이용해 DOM에 직접 접근하거나, 컴포넌트 내부 변수를 만들 수 있다.

  import {useRef} from 'react';

// useRef 객체 만들기
const (객체) = useRef();
// 직접 DOM에 접근하기
(객체).current.focus();
// 접근하고 싶은 DOM에 ref 설정
ref = {객체}

const (내부 변수) = useRef(4);
const onCreate = () => {
    console.log((내부변수).current); //4
    (내부 변수).current += 1;
  }

(useRef로 만든 변수).current를 통해 값을 제어할 수 있다.