이번주는 React에 내장 된 Hook API 중, useRef에 대해서 공부해봤다.
useRef를 다루기 전에, Hook에 대해서 한번 정리하고, useRef에 대해서 살펴보자.
Hook
Hook이란?
Hook은 React 16.8 버전부터 React에 새로 추가 된 요소이다. Hook을 사용하기 이전에는, Class형 코드를 작성했다. Class형 코드에는 다양한 문제가 있었기 때문에, React팀은 Hook을 통해 문제를 해결하고자 했다. 그렇다고 해서 Class형과 완전 다른 개념이 아니다. Hook은 Class형 코드에서 사용하던 코드들을 더 쉽게 사용할 수 있도록 직관적인 API를 제공한다.
Hook이 해결한 문제
- 컴포넌트 사이에서 상태 로직을 공유하기 더 좋아졌다
- 생명주기 기반으로 메서드를 쪼개는 것 보다, Hook을 통해 서로 비슷한 것을 하는 작은 함수의 묶음으로 컴포넌트를 나눈다.
Class 컴포넌트에서는 생명주기 메서드(componentDidMount, componentDidUpdate, componentWillUnmount...)를 사용했다. 각 생명주기 메서드에는 관련 없는 로직이 섞여들어가곤 했다. 따라서, 이러한 문제를 해결하기 위해 생명주기 메서드를 기반으로 쪼개는 것보다, Hook의useEffect를 통해 서로 비슷한 것을 하는 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 사용한다. - Class형은 사람과 기계를 혼동시킨다. Hook은 Class없이 React의 기능을 사용하는 방법을 제공한다.
useRef
Hook API 중 하나인, useRef에 대해서 알아보자.
useRef란?
const refContainer = useRef(initialValue);useRef는 .current 프로퍼티로 전달된 initialValue 인자로 초기화 된, 변경 가능한 ref 객체를 반환한다.
useRef의 사용
특정 DOM을 선택 및 조작하고 싶을 때
Javascript에서는 특정 dom을 선택하고 싶을 때 querySelector, getElementById와 같은 dom selector 함수를 사용해서 dom을 선택했다.
리액트에서도, dom요소를 선택해야하는 상황이 발생할 때가 있다. (특정 엘리먼트의 크기를 가져와야할 때, 포커스를 설정해줘야할 때, 특정 dom에 라이브러리를 사용해야할 때 ...)
그럴 때, react에서는 ref를 사용한다. 클래스형 컴포넌트에서는 React.createRef를 사용하고, 함수형 컴포넌트에서는 useRef라는 hook을 사용한다.
예제 코드를 통해, 버튼을 클릭했을 때 input dom 요소에 포커스가 잡히도록 만들어보자.
컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리하고 싶을 때 (리렌더링 X)
- useRef로 컴포넌트 안의 변수를 만들 수 있다.
이때, useRef로 만든 변수의 값이 바뀌어도 useRef는 리렌더링 하지 않는다. 컴포넌트의 속성만 조회&수정한다. 따라서 값이 바뀌어도 렌더링이 불필요해서 막고싶을 때 useRef를 사용해서 관리해준다.
-
setState하면 return이 다시 실행된다.
하지만, useRef를 써서 값을 변경하면 return이 다시 실행되지 않는다.
즉, useRef는 불필요한 렌더링을 막아서, 성능 최적화에 사용되기도 한다.
useRef는 dom을 조작하고 싶을 때도 쓸 수 있지만, 값이 바뀌어도 렌더링이 불필요해서 막고싶을 때도 useRef를 사용해서 관리해준다. 즉, 상태로 관리할 필요가 없는 변수는 useRef로 관리할 수 있다. -
리액트에서 상태는, 상태를 바꾸는 함수를 호출하고 나서 그다음 렌더링 이후에 업데이트 된 상태를 조회할 수 있지만 useRef로 관리하는 변수는 설정 후 바로 조회할 수 있다.
+) 예제 코드에 더해, setTimeout, setInterval을 통해서 만들어진 id를 useRef를 통해 관리하고, clear 할때에도 사용된다. 이를 통해 메모리를 확보할 수 있다.
✅ 질문
- 전역 변수로 관리하는 것과 무슨 차이인가? 굳이 useRef를 사용해서 관리하는 이유?
참고
