[react] useref()

자바스크립트에서 DOM을 조작할 땐 queryselector나 getElementById, getElementByClassName DOM Selector메소드를 사용했죠. 하지만 리액트에서 그런식으로 DOM을 조작하면 안 됩니다. 대신 useRef() 훅을 사용해야 합니다.

useRef란

.current 프로퍼티에 변경가능한 값을 담고 있는 상자와 같습니다. 그리고 다음과 같은 특징을 갖고 있습니다.

1. 값을 유지

useRef는 순수 자바스크립트 객체를 생성하고, component가 mount될 때 react-dom코드 내부 전역변수에 초기값을 저장합니다. update가 되도 계속 이 값을 가져오기에 가변값을 유지하는 데 편리합니다.

2. 컴포넌트의 리랜더링이 없다

이벤트 객체와 달리 useRef는 .current 프로퍼티가 변했다고 해서 컴포넌트가 리렌더링 되지 않습니다. 그러므로 불필요한 메모리 사용을 줄일 수 있습니다. 단, ref가 attach, detach될 때 어떤 코드를 실행하려 한다면 콜백 ref를 사용해야 합니다.

사용법

1. ref 생성

먼저 useRef 훅을 써서 컴포넌트 안에 변수를 만들어줍니다.

그리고 inputRef가 조작할 dom의 ref 속성값을 inputRef로 줍니다.

2. .current로 useRef 변수에 접근

이제 해당 input 태그에 inputRef.current로 접근이 가능합니다. (.current는 선택한 dom을 의미합니다) 만약 값이 없을 경우 해당 input tag에 focus를 주고 싶다면 아래 예시 1번처럼, input 태그의 값에 접근하고 싶다면 아래 예시 2번처럼 코딩하시면 됩니다.

inputRef.current.focus // 1번
inputRef.current.value // 2번

여러개의 dom 관리시

만약 여러개의 dom을 조작할 때는 어떻게 해야 할까요?

1. useRef를 여러개 만들기

조작해야 하는 dom 개수가 한정적이고 서로 연관성이 없는 dom 객체라면 일일이 useRef를 만들어 줘도 됩니다.

이런식으로 다운받을 이미지 dom을 관리할 imgRef, input 값을 관리할 inputRef 2개를 만든 것처럼 말입니다.

2. useRef를 배열로 만들기

하지만 조작해야 되는 dom의 개수가 많고 서로 연관이 있다면 useRef를 배열로 만들어 주는 게 좋습니다.

이렇게 배열로 useRef 변수 inputRef를 생성하고, input값이 여러개인 form에 적용해 보면

inputRef가 길이 3의 배열로 값이 들어간 것을 알 수 있습니다.

참고

💻 React:: hooks-reference

💻 벨로퍼트 모던 리액트

💻 useRef는 처음이라:: 개념부터 활용 예시

💻 useRef() 여러개 dom 관리