[React] Study #9 | useRef 로 특정 DOM 선택하기

리액트를 사용할 때, 가끔식 DOM을 직접 선택해야하는 상황이 발생할 수 있다.

ex) 특정 엘리먼트의 크기를 가져와야 할 경우

ex) 스크롤바 위치를 가져오거나 설정해야할 경우

ex) 포커스를 설정해야할 경우

 

이럴 경우, 리액트에서 ref라는 것을 사용한다!

 

💡useRef?

• 함수형 컴포넌트에서 ref를 사용할 때 사용하는 Hook 함수

---

이번에 구현할 것?

전에 만들었던 inputSample에 초기화 버튼을 누르면 이름 input에 포커스가 잡히도록 하는 기능!

 

import React, {useState, useRef} from 'react' // useRef 선언

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

    const {name, nickname} = inputs;

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

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

    const onReset = () =>{
        setInputs({
            name: '',
            nickname: '',
        });
        // ref 객체의 .current 값은 우리가 원하는 DOM을 가리켜주게 된다.
        nameInput.current.focus();
    }

    return (
        <div>
            <input 
                placeholder="이름" 
                onChange={onChange} 
                name="name" 
                value={name} 
                {/* (2) 우리가 선택하고 싶은 DOM에 ref 값으로 객체를 설정 */}
                ref={nameInput}/>

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

export default InputSample

 

 

 

---

Reference

https://react.vlpt.us/