Hook : 함수 컴포넌트에서 React state와 생명주기 기능을 “연동(hook into)“할 수 있게 해주는 함수
class 안에서는 동작하지 않음 대신 class 없이 React를 사용할 수 있게 함
훅은 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능을 사용할 수 있게 하는 기능입니다.훅을 통해서 함수형 컴포넌트에서도 컴포넌트의 상태값을 관리할수도, 컴포넌트의 생명 주기 메소드또한 이용할 수 있게 해줍니다.
useRef 란?
.current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환
반환된 객체는 컴포넌트의 전 생애주기를 통해 유지
React에서 Ref는 Reference의 줄임말이며 DOM 요소를 참조한다
React 컴포넌트는 기본적으로 내부 상태(state)가 변할 때 마다 다시 랜더링(rendering)이 된다. 이는 함수 내부의 변수들이 모두 다시 초기화가 되고 함수의 모든 로직이 다시 실행된다는 것을 의미한다.
1. 특정 DOM 선택하기
함수형 컴포넌트에서 ref 를 사용할 때는 useRef 라는 Hook 함수를 사용하고 클래스형 컴포넌트에서는 콜백 함수를 사용하거나 React.createRef 라는 함수를 사용합니다.
2. 컴포넌트 안의 변수 만들기
useRef 로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않습니다.
리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그다음 렌더링 이후로 업데이트된 상태를 조회할 수 있지만, useRef 로 관리하는 변수는 설정 후 바로 조회할 수 있습니다.
3. 리렌더링 방지하기
컴포넌트는 자신의 state가 변경되거나, 부모에게서 받는 props가 변경되었을 때마다 리렌더링 됩니다. useRef 로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않으므로 리렌더링 방지에 활용할 수 있습니다.
useRef 훅 함수는 다른 React Hooks에 비해서 사용 빈도가 적은데, 이는 용도가 제한적이기 때문이다. useRef를 사용하는 또 다른 경우는 DOM 노드나 React 엘리먼트에 직접 접근하는 경우이다.
자료
