리액트 - useRef로 특정 DOM 선택하기

이전에 작성했던 코드는 이름과 닉네임을 적으면 아랫줄의 값에 그대로 출력되는 방식이었고, "초기화" 버튼을 누르면 초기화 버튼에 focus가 되었다.

그럼 만약에 이 focus를 이름을 입력하는 창으로 변경하려면 어떻게 해야할까?

useRef를 이용해서 focus부여해보자

먼저 useRef()를 담은 변수를 선언한다.

const nameInput = useRef();

이 nameInput을 어디에 넣냐면, return내부에서 내가 focus를 하고자 하는 dom에 속성을 추가한다.

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

나는 이름을 입력하는 input창을 focus하고 싶기 때문에 ref 속성을 추가했다.

"초기화 버튼을 누를 때" focus 가 되야하므로 onReset함수를 수정하는 것이 맞다.

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

useref를 담은 변수 nameInput 이 위치한 input창을 선택했고(input값에 ref를 넣었으므로), current.focus()를 통해서 초기화 버튼을 누르면 해당 dom에 focus를 하게 수정한다.

다시 실행해서 확인해보자.

초기화 버튼을 누른 뒤, 이름을 입력하는 창에 굵은 검은색 테두리가 나타나는 것을 볼 수 있다.