useRef
-
[React] useRef로 컴포넌트 안의 변수 만들기Javascript/React 2021. 1. 4. 12:47
예를 들어 컴포넌트 내부에 let 키워드를 사용하여 변수를 선언했을 때 다음 렌더링이 될 때 변수 값이 초기화 된다. 만약 유지하는 값을 관리하려면 useState를 사용해야 하는데, useState는 상태를 바꾸게 되면 컴포넌트가 리 랜더링 된다. 하지만, 가끔 어떤 값을 바꿨을 때 굳이 리렌더링 할 필요 없는 값을 관리하는 경우도 있다. 이럴 때 useRef를 사용하면 된다. useRef는 특정 DOM을 선택해야할 때 사용하는데 이것 외에도 컴포넌트가 리 렌더링 될 때마다 계속 기억 되는 값을 관리할 때도 사용할 수 있다. 주로 setTimeout, setInterval을 사용했을 때 주어지는 ID값을 기억해야 할 때 사용하고 외부 라이브러리를 사용하여 생성된 인스턴스를 담을 때도 사용하고, 스크롤 ..
-
[React] useRef로 특정 DOM 선택하기Javascript/React 2021. 1. 4. 12:37
HTML/Javascript 환경에서는 특정 DOM을 선택할 때 getElementbyid나 query selector를 사용한다. react를 사용할 때 특정 엘리먼트의 위치나 크기를 가져와야 한다 든지, 스크롤바 위치를 가져오거나 설정해야 한다 든지, 포커스를 설정해야 된다 든지 등 다양한 상황이 있다. 추가적으로 video.js 라이브러리나, d3, chart.js 등 그래픽 라이브러리를 사용할 때에도 특정 DOM에 라이브러리를 적용하기 때문에 DOM을 선택하는 상황이 발생할 수 있다. 이 때 react에서 ref라는 것을 사용한다. 함수형 컴포넌트에서는 useRef를 사용하고 클래스형 컴포넌트에서는 React.createRef()를 사용한다. 우선 이번 챕터에서는 함수형 컴포넌트인 useRef를 ..