ksw_devlog
useRef 가 필요한 상황 본문
useRef 는 특정 DOM을 선택하거나 컴포넌트 안의 변수 만들 때 혹은 리렌더링 방지를 할 때 사용하는 React의 Hook 함수입니다.
리액트에서는 DOM을 선택할 때 ref 를 사용합니다. 함수형 컴포넌트에서 ref 를 사용할 때는 useRef 를 사용하고
useRef 로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않습니다. 리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그다음 렌더링 이후로 업데이트된 상태를 조회할 수 있지만, useRef 로 관리하는 변수는 설정 후 바로 조회할 수 있습니다.
이 변수를 사용하여
setTimeout, setinterval 을 통해서 만들어진 id
외부 라이브러리를 사용하여 생성된 인스턴스
scroll 위치
같은 값들을 관리할 수 있습니다.
사용예시로는 input창에 focus를 주는 경우와 media player에 재생과 정지를 설정할 경우(media playback)가 있습니다.
[React] useRef - 필요성, 필요한 상황, 사용법
🔎 이번에는 React를 사용하는 프로젝트에서 DOM을 직접 선택해야 하는 상황일 때 사용하는 useRef에 대해 학습했다. 왜 필요한지, 필요한 상황은 언제인지, 어떻게 사용하는지 정리하며 복습하고
velog.io
https://mnxmnz.github.io/react/what-is-use-ref/
useRef는 처음이라 :: 개념부터 활용 예시까지 - Deeming
React useRef 개념과 대표적인 3가지 활용 방법을 예제와 함께 정리했습니다. [1] 특정 DOM 선택하기 [2] 컴포넌트 안의 변수 만들기 [3] 리렌더링 방지하기
mnxmnz.github.io
'기술면접 > 기타' 카테고리의 다른 글
| 순수함수(불변성, 사이드이펙트) / React state, props (0) | 2023.04.05 |
|---|---|
| Cookie의 MaxAge, Expires 옵션 (0) | 2023.04.04 |
| 배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유 (0) | 2023.04.03 |
| require 와 import 차이점 (0) | 2023.04.03 |
| this (0) | 2023.03.31 |