[+67][기업협업]useRef

위코드 시작 이후 2차 프로젝트 끝날 때 까지 여러 개념들에 대해 자세하게 공부하기보다 나중에 공부해야지 하고 미루는 개념들이 몇가지 있었다. 기업협업을 하다보니 결국 내가 공부하지 않았던 부분이 뭐를 하려고 할 때마다 걸려서 공부하고 이번주에는 그런 개념들을 정리하고자 한다.

useRef로 특정 DOM 선택하기

JavaScript를 사용할 때, 우리가 특정 DOM을 선택해야하는 상황에

getElementById-id는 하나만 쓰이니까 id로 가지고 오는 하나의 element
getElementsByClassName-class는 여러 태그에 중복으로 사용할 수 있으니까 여러 elements가지고 온다고 해서 Elements
querySelector-#id이름 또는 .class이름 으로 element가지고올 수 있다.
이 세 가지와 같은 DOM Selector함수를 이용해서 DOM을 선택한다.

리액트를 사용하는 프로젝트에서도 가끔씩 DOM을 직접 선택해야하는 상황이 발생할 때도 있다.
나도 기업협업하면서 React , Next.js를 쓰지만 google map api를 쓰는 과정에서 공식 documentary에서 DOM을 선택해서 쓰길래 오랜만에 쓰게 되었다.

보통 쓰게 되는 상황에는

• 특정 element의 크기를 가져와야 한다던가
• 스크롤바 위치를 가져오거나 설정해야 한다던가
• 포커스를 설정해줘야 한다던가
• HTML5 Video관련 라이브러리 또는 그래프 관련 라이브러리 등 외부 라이브러리를 사용해야 할 떄에도 특정 DOM을 선택해야 하는 상황이 생기기도 한다.

이럴 때, 리액트에서 ref라는 것을 사용한다.

함수형 컴포넌트에서 ref를 사용할 때, useRef라는 Hook함수를 사용한다. 클래스형 컴포넌트에서는 콜백함수를 사용하거나 React.createRef라는 함수를 사용한다.

오늘은 useRef를 사용해보자.

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

function ImputSample() {
  const [inputs, setInputs] = useState({
  name: '',
  nicknams:''
  });
  
  const nameInput = useRef();
  
  const { name, nickname } = inputs; // 비구조화 할당을 통해 값 추출
  
  const onChange = e => {
    const { value, name } = e.target; // 비구조화 할당을 통해 값 추출
    setInputs({
    ...inputs,  // 기존의 input 객체를 모두 복사한 뒤
    [name]: value  //name 키를 가진 값을 value로 설정
    });
    };
    
   const onReset = () => {
     setInputs({
     name: '',
     nickname: ''
     });
     nameInput.current.focus();
     };
     
     return(
       <div>
         <input
           name="name"
           placeholder = "이름"
           onChange={onChange}
           value={name}
           ref={nameInput}
           라고 직접 지정
           />
          <input
            name="nickname"
            placeholder="닉네임"
            onChange={onChange}
            value={nickname}
            />
            
          <button onClick={onReset}>초기화</button>
          <div>
            <b>값: </b>
            {name} ({nickname})
          </div>
        </div>  
     )
}

export default InputSample;

useRef()를 사용해서 Ref객체를 만들고, 이 객체를 우리가 선택하고싶은 DOM 에 ref값으로 설정해줘야 한다.
그러면 Ref 객체의 .current 값은 우리가 원하는 DOM을 가르키게 된다.

위 예제에서는 onReset함수에서 input에 포커스하는 focus()DOM API를 호출한 것이다.

브라우저에서 인풋에 값을 입력한 다음 초기화를 누르면 input에 포커스가 잡힐 것이다.

흠....더 공부해야지