리액트 내장 훅인 useRef에 대한 이해가 더 필요하다고 생각이 들어 공부하며 쓰는 글
React를 이용하여 useEffect, useState는 수도 없이 잦은 사용을 하고 있다!
하지만, 상태 관리 라이브러리를 사용하여 전역 상태를 관리하는 등의 이유로 useRef, useReducer, useContext를 사용해본 적이 거의 없다는 점
거의 사용해보지 않으면 까먹기도 하고 제대로 된 이해조차 하기 힘든 거 같다!
당장 거의 끝나가는 프로젝트에 적용을 하기 보다는 이번 기회에 제대로 이해를 하고 다음 프로젝트에서부터 적용을 해나가려 한다 :)
그럼 오늘은 useRef부터 시작하죠잉
useRef란?
useRef is a React Hook that lets you reference a value that’s not needed for rendering.
출처: https://react.dev/reference/react/useRef
리액트 공식문서에서는 이렇게 말한다.
말 그대로, useRef란 렌더링에 필요하지 않은 값을 참조하게 해주는 리액트 훅이다!
이는 DOM 요소나 값을 참조하고 리렌더링 없이 값이 유지가 필요할 때 유용하게 사용된다
(ref의 값이 바뀌어도 리렌더링이 일어나지 않음)
useRef의 주요 특징으로는
- DOM 요소 접근
(HTML의 직접적인 접근이 필요할 때, 리렌더링 없이 DOM 조작)
- 리렌더링 없이 값 유지
(ref 값의 변경이 화면 업데이트 영향을 미치기 않음 - NO re-rendering)
-current 속성
(useRef로 생성된 객체는 { current: value } 형태의 객체를 반환 -> 값 저장 및 DOM 요소 참조 시 current 속성 사용)
ref 객체를 생성할 때는 useRef(initialValue)의 형태로 만들어 준다.
(이 initialValue는 어떤 타입이든지 상관 없다)
첫 번째 HTML 요소 조작부터 살펴보자
-
ref의 current.value로 필드의 값을 가져오거나 변경 가능
-
ref의 current.classList를 통해 DOM 요소의 클래스를 추가 또는 제거 가능
current.classList.add() 또는 current.classList.remove()로 현재 ref로 참조하는 클래스 이름에 클래스를 추가하거나 제거할 수 있다!
-
ref.current.style로 DOM 요소의 스타일 직접 조작 가능
style로 현재 요소의 스타일링 할 수가 있음
-
ref.current.scrollTop 또는 scrollTo 등으로 스크롤 제어 가능
두 번째로 DOM 이벤트 및 속성 정보 확인을 살펴보자!
-
getBoundingClientRect()를 통해 요소의 크기와 화면 내 위치 가져오기 가능!
언제 이걸 쓸 지는 모르겠지만 이러한 방법도 있삼
-
요소의 속성을 확인하거나 변경 가능
getAttribute()와 setAttribute()로 요소의 속성을 확인하거나 변경할 수 있다
예시로 버튼 ref의 버튼 비활성화 코드를 아래에 첨부했다!
-
이벤트 트리거
a. 클릭 이벤트 트리거
(click() 메서드를 통해 클릭 이벤트를 직접 실행)
클릭뿐만 아니라 foucs, blur, scrollIntoView, select 등 다양한 이벤트 트리거 가능
b. dispatchEvent()를 통한 특정 이벤트 직접 트리거
(new Event로 트리거 할 이벤트 생성 -> 이거 언제 사용되는지 잘 모르겠네요..? 아시는 분 댓글로 알려주세욥)
이번에는 useRef에 대해서 알아봤다
다음 글에서는 useReducer 그리고 useContext에 대해 다시 공부해보자!
