[React] useRef로 특정 DOM 선택하기

react사용할 때도 dom을 직접 선택 해야할 때가 있다.
focus설정한다거나.. 하는 다양한 상황.
html 비디오 관련 라이브러리나 그래프 관련 라이브 러리를 사용하게 될 때에도 특정 dom에다가 해야해서.. 그럴때가 있다.

class Component는 좀 나중에 다루겠다.

초기화 버튼 눌렀을 때 포커스를 이름에 두고 싶다면?

Dom에 직접 접근하는 방법 : useRef

const nameInput = useRef();

하면 nameInput이라는 객체가 만들어진다.

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

선택하고 싶은 element에 ref = {nameInput} 해 준다.
이러면 이 Dom에 직접 접근 가능하다.

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

그런뒤 이렇게 해 주면 이름 쪽에 focus가 잡힘.

current라는 값이 들어있는데, current가 돔을 가리킨다.
dom API중에 focus()라는게 있다.

useRef는 Dom선택 말고도 렌더링과 관련 없는 변수 관리 할 때도 사용 된다.