[React] 변수 유지 및 DOM 접근에 유용한 useRef()

useRef()란?

useRef()는 리액트의 Hooks 중 하나로, 함수 컴포넌트 내에서 변수를 유지하고 싶을 때 사용한다.

또한, DOM 요소에 접근하기 위해 참조를 생성하기도 한다. 예를 들어, 특정 DOM 요소의 크기나 위치를 가져오거나 스크롤 바 위치를 가져와야 할 때, 엘리먼트에 포커스를 설정해줘야 할 때 등의 작업을 수행할 때 많이 사용한다.

 

useRef()를 호출하면 반환되는 객체는 current라는 속성을 가지고 있는데, 이 속성을 통해서 변수를 유지할 수 있다.

current 속성의 값은 첫 번째 렌더링 이후에도 유지되며, 이 값을 변경해도 컴포넌트가 리렌더링 되지 않는다.

(DOM을 선택하든 변수를 담든 무조건 current 속성을 가져와야 한다. useRef는 current와 한 몸이라고 생각하자)

 

사용 방법

DOM에 접근하기

const App = () => {
    const focusTarget = useRef();
    const onFocus = () => {
        focusTarget.current.focus();
    }

    return (
        <div>
            <input type="text" ref={focusTarget} />
            <button type="button" onClick={onFocus}>포커스 활성화</button>
        </div>
    )
}

첫 번째로, useRef()는 DOM 요소에 접근할 수 있다. 변수 focusTarget에 useRef()를 선언해 주고, input 엘리먼트에 ref 속성으로 focusTarget을 주었다. 그리고, useRef()를 이용해서 포커스를 주기 위한 onFocus() 함수를 만들어주고 버튼에 onClick 이벤트로 담아주었다. 이제, '포커스 활성화' 버튼을 클릭하면 input 엘리먼트가 포커스 되는 것을 확인해 볼 수 있다.

 

리렌더링 이후에도 데이터 유지하기

const App = () => {
    const [render, setRender] = useState(false);

    let num = 0;
    let refNum = useRef(0);
    const increaseNum = () => {
        num++;
        refNum.current++;
        setRender(!render);
    }

    return (
        <div>
            <button onClick={increaseNum}>렌더링</button>
        </div>
    )
}

두 번째로, useRef()는 컴포넌트가 리렌더링 되더라도 데이터를 유지할 수 있다는 특징을 갖고 있다.

위에 예시 코드를 보면, num과 refNum이 있다. num은 일반 변수고 refNum은 useRef()로 선언한 변수이다.

각각 변수에 숫자 0을 할당해주고 increaseNum() 함수를 통해 숫자를 1씩 증가시킴과 동시에 리렌더링이 되도록 해주었다. 결과는 num은 계속 1을 반환하지만, refNum은 1씩 증가하는 것을 확인할 수 있었다.

 

setRender(!render) 부분에서 리렌더링이 발생하면, num은 num++로 1이 되었지만, 리렌더링 때문에 다시 0으로 초기화된다. 반면에 refNum은 useRef()로 인해서 리렌더링 이후에도 데이터를 유지할 수 있기 때문에 초기화되지 않았다.

 

1. useRef()는 DOM 요소에 접근할 수 있음.
2. useRef()는 리렌더링 이후에도 데이터를 유지할 수 있음.
3. 항상 사용할 땐 .current를 붙여주자!