useRef로 특정 DOM 선택하기
JavaScript 를 사용할 때에는, 특정 DOM을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택합니다.
리액트에서도 DOM 을 직접 선택해야 하는 상황이 발생할 때도 있습니다. 예를 들어서 특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야 된다던지, 또는 포커스를 설정해 줘야 된다던지 등 정말 다양한 상황이 있을 수 있다. 추가적으로 Video.js, JWPlayer 같은 HTML5 Video 관련 라이브러리, 또는 D3, chart.js 같은 그래프 관련 라이브러리 등의 외부 라이브러리를 사용해야 할 때에도 특정 DOM 에다 적용하기 때문에 DOM을 선택해야 하는 상황이 발생할 수 있으며. 리액트에서는 이럴 때 useRef를 사용합니다.
useRef 특징
useRef 함수는 current 속성을 가지고 있는 객체를 반환하는데, 인자로 넘어온 초기값을 current 속성에 할당합니다. 이 current 속성은 값을 변경해도 상태를 변경할 때 처럼 React 컴포넌트가 다시 랜더링 되지 않습니다. React 컴포넌트가 다시 랜더링 될 때도 마찬가지로 이 current 속성의 값이 유실되지 않습니다.
'React' 카테고리의 다른 글
| 전역 상태 관리 도구 Redux (0) | 2023.03.03 |
|---|---|
| Component 의 Props 와 State (0) | 2023.03.02 |
| 리액트 Batching (0) | 2022.12.03 |
| SPA 와 MPA (0) | 2022.12.01 |
| 단방향 과 양방향 데이터 바인딩 (0) | 2022.12.01 |