[REACT] useRef

어떻게 쓰일까?

1. DOM을 선택하는 기능
2. 조회 밑 수정이 가능한 변수를 관리하는 기능

사용 예제 - DOM을 선택

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

function Test() {
    const [inputs, setInputs] = useState({
        name: '',
        nickname: ''
    })
    const { name, nickname } = inputs

    const onChange = (e) => {
        const { name, value } = e.target
        setInputs({ ...inputs, [name]: value })
    }

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

    const ref = useRef()

    return (
        <div>
            <input placeholder='이름' name='name' value={name} onChange={onChange} ref={ref}></input>
            <input placeholder='닉네임' name='nickname' value={nickname} onChange={onChange}></input>
            <button onClick={onReset}>초기화</button>
        </div>
    );
}

export default Test;

이름, 별명을 입력하고 초기화 버튼을 눌렀을때, 이름, 별명을 초기화하고 마우스의 Focus를 이름 input창에 두는 코드이다. 다음을 위해 이러한 작업을 수행함

## 첫번째
const ref = useRef() 
// ref 객체를 생성

## 두번째
<input placeholder='이름' name='name' value={name} onChange={onChange} ref={ref}></input>
//원하는 위치(DOM)에 ref 값으로 설정한다.

## 세번째
const onReset = () => {
        setInputs({
            name: '',
            nickname: ''
        })
        ref.current.focus()
    }
// 객체를 통해 수행하고 싶은 작업을 수행한다.

사용 예제 - 변수관리

useRef로 변수를 관리하면 변수를 업데이트해도 페이지가 리랜더링 되지 않는다

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

function Test() {
    const users = [
        {
            id: 1,
            name: '백우진'
        },
        {
            id: 2,
            name: '홍길동'
        },
        {
            id: 3,
            name: '김길동'
        }
    ];

    const nextId = useRef(4)
    const onCreate = () => {
        // 배열에 {id,name} 추가하는 로직 생략
        nextId.current += 1
    };

    return (
        <div>
            {users.map((user, index) => (
                <div key={index}>
                    <span>{user.id}.{user.name}</span>
                </div>
            ))}
        </div>
    );
}

export default Test;

배열의 users에 id가 3인 유저까지 존재하기에 다음 유저는 4라는 id를 가지게 된다. 그래서 nextId라는 useRef객체를 생성하고 초기값으로 4를 준다. nextId의 값을 변경시키는 방법은 nextId.currunt를 통해 nextId값을 증가시킬 수 있다.