[React] useRef란 무엇인가

useRef... 수업 때 들었지만 어렴풋이만 알아듣고 아직 완전히 이해하지 못해서 이참에 뿌셔보려고 한다!!

정신차리고 레츠고🏃‍♀️

---

useRef는 특정한 요소의 id 처럼 활용할 수 있을 뿐만 아니라, 변수를 만드는 것에도 사용할 수 있는 리액트 훅(hook)이다.

useRef의 역할과, 어떻게 사용할 수 있는지를 알아보자.

 

💻  첫 번째) 특정 DOM 선택

JavaScript에서는 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector같은 DOM Selector 함수를 사용해서 DOM 을 선택한다.

 

리액트를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 있다.

상황 예시)

• 특정 요소의 크기 가져오기
• 스크롤바의 위치를 가져오거나 설정하기
• 특정 요소에 포커스 처리
• Video 관련 라이브러리, Chart.js 같은 외부 라이브러리 사용할 시 특정 DOM에 적용

 

이런 상황에서 React에선 useRef라는 Hook 함수를 사용한다. (함수형 컴포넌트)

import React from 'react'

function Login() {
    const userId = useRef('')
    const doLogin = () => {
        alert(userId.current.value)
    }

    return (
        <div>
            <input placeholder="아이디를 입력하세요" ref={userId} />
            <button onClick={doLogin}>로그인</button>
        </div>
    )
}

export default Login

먼저 함수 최상단에서 const 변수명 = useRef(초기값)의 형태로 변수를 선언하고, 해당 변수를 특정한 jsx 요소에다가  ref={변수명}  형태로 할당해준다. ref가 요소에 전달될 때, 그 노드를 향한 참조는 ref의 current 속성에 담기게 된다. 변수명.current 를 통해서 해당 요소에 언제든 접근할 수 있게 된다. 

 

 

 

 

 

💻  두 번째) 컴포넌트 안의 변수 만들기

useRef 는 값이 변해도 재렌더링 되지 않는 변수를 만들고자 할 때도 사용할 수 있다.

값이 변할 때마다 꼭 다시 렌더링하지 않아도 되는 변수라면, 굳이 useState를 사용할 필요가 없다. 필요하지 않은데도 재렌더링 하는 것은 성능적인 측면에서 바람직하지 않다.

렌더링이 되지 않는 것과 별개로, useRef 값의 경우 컴포넌트가 다시 렌더링되더라도 다시 선언되는 것이 아니라 변한 그 값이 그대로 남아있게 된다는 점에서 그냥 변수와 차이가 있다.

 

 

예제에서도 useState를 사용하여 결과값을 출력하는 경우, 상태가 변화할 때마다 재렌더링 되면서 결과값이 출력되지만, useRef를 사용하여 결과값을 출력하는 경우, 값이 바뀌어도 재렌더링이 일어나지 않는다. 코드를 수정하면서 재렌더링을 일으키면 결과값은 연산된 값으로 출력된다. State 대신 Ref를 사용하면 불필요한 렌더링을 막을 수 있다. 또한, state가 변하면서 재렌더링이 일어날 때 컴포넌트 내부 일반 변수들은 모두 초기화가 되지만 Ref에 저장된 값들은 유지가 된다.

 

 

[한눈에 비교해보기]

 

state는 변화가 일어날 때마다 바로 재렌더링을 일으킨다.

Ref는 값이 변하지만 재렌더링되지 않고, state가 일으키는 재렌더링 때에 저장된 값을 출력하는 것을 볼 수 있다.

Var(일반 변수)는 클릭 했을 때 값이 변하지만, 재렌더링이 일어날 시 값이 초기화되어 0만 출력한다.

 

---

아직 어떨 때에 useRef를 써야할 지 감이 잘 안 잡히긴 한다.. 토이 프로젝트를 하면서 어떤 부분을 Ref로 처리할 수 있을 지를 고민해봐야겠다!