useRef

리액트를 사용하다보면 DOM에 접근하고 싶을 때가 한 두번이 아니다. 자바스크립트로만 할 때는 getElementbyId나 getElementbyClass 혹은 querySeletor를 통해 쉽게 접근했다보니 리액트로 웹을 만들다보면 자연스레 DOM을 가져올 생각부터 든다. onChange나 onClick 이벤트를 통해 쉽게 이벤트 객체를 가져올 수도 있지만, 태그 자체를 가져와할 때도 있다. 이럴 때 useRef를 주로 쓴다.

사용법

파일 첨부를 예로 들어 설명하고자 한다. 파일 첨부 시 대부분 input 태그 자체를 사용하지만, 별도로 디자인해 사용하기도 한다. 이러 때 useRef를 이용한다. 

import { useRef } from 'react'

export default UseRefPage(){
const uploadFileInputRef=useRef();

.
.
.

  const onChangeInputImage = async (e) => {
    const file = e.target.files.[0];
    ...
}


  const onClickUploadFileBtn = () => {
    uploadFileInputRef.current.click();
  };

.
.
.


return(
	<>
       <div onClick={onClickUploadFileBtn}>
           +<span>Upload</span>
           <input type="file"
                  onChange={onChangeInputImage}
                  ref={uploadFileInputRef}
             />
        </div>
    </>
)
}

위 코드는 디자인한 태그를 눌렀을 때, input이 작동하도록 걸어준 코드다. 먼저 input 태그에는 파일 첨부할 수 있는 file 타입을 걸고, onChage 메서드를 통해 변화 시 특정 함수를 실행시켰다. 여기까진 여타 input을 활용한 파일 첨부다. 우린 input의 모습을 숨기고 이 기능을 디자인한 div에 연결시키고자 한다. ref라는 속성을 쓰고 코드 상단에서 선언한 useRef의 변수명 uploadFileInputRef을 이 곳에 작성한다. 이렇게 기재하면 uploadFileInputRef에는 해당 input 태그가 묶인다.

이제 div 태그에 onClick 이벤트를 설정하고 함수를 실행시켰다. 이 함수 안에는 uploadFileInputRef.current.click()이란 코드를 넣었는데, 이는 uploadFileInputRef에 있는 current(현재 값)에 있는 것을 클릭하라는 의미다. 즉, div 태그를 클릭하면 input 태그가 클릭된다. 이로써 input 태그는 기능만 남은 태그, div는 기능은 없고 디자인만 있는 태그가 된 것.

 

마무리

몇몇 글을 읽거나 리액트 공식 문서를 읽다보면 DOM에 직접 접근해 값을 바꾸지 않길 바란다고 한다. 어디서 어떻게 바꾸었는지 쉽게 알기 어렵기 때문인 듯하다. useRef도 그중 하나다. 다만, 값을 바꾸지 않고 활용하는 선에서 사용한다면 문제 없다고 본다. 더불어 useRef는 리렌더링을 발생시키지 않기 때문에 어차피 원하는 활용도에 따라 사용률이 떨어질 수도 있다(물론, callback으로 넘기면 가능하긴 하다).

[React] useRef

[React] DOM 노드를 측정하려면 어떻게 해야 합니까?

※ 잘못된 내용이 있을 경우 댓글로 알려주세요. 배우고 익히고 수정하겠습니다:)