[React] useRef란? useRef의 사용

 

2022.09.19 - [라이브러리/React] - [React] input태그 상태 관리

[React] input태그 상태 관리

이 글은 이전 글인 input태그 상태관리와 연계 됩니다.

useRef란?

• javascript에서 특정 Dom을 선택하는 역할
  ex) getElementById, querySelector
• 특정 DOM에 접근할 때 사용한다.
• 외부라이브러리 사용할때 유용하다.
• 원하는 객체의 속성에 ref={} 의 형태로 작성
• 포커스를 잡으려면 useRef객체.current.focus() 형태로 작성하면 된다.

const nameInput = useRef();

const onClick = () => {
    nameInput.current.focus();
}

return(
    <input ref={nameInput} />
    <button onClick={onClick}>클릭</button>
)

useRef의 사용

• 포커스를 잡으려면 nameInput.current.focus() 형태로 작성하면 된다.

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

function InputSample() {

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

    const nameInput = useRef(null);

    const {name, nickname} = inputs; //비구조화 할당을 통해서 값을 추출

    const onChange = (e) => {
        const {value, name} = e.target; // e.target에서 name과 value를 추출
        setInputs({
            ...inputs, // 기존의 input 객체를 복사
            [name] : value // name 값을 value로 설정
            });
    }

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

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

export default InputSample;

초기화를 누르면 이름 input에 포커스가 잡힌다.