useRef(2)
-
[React] useRef로 컴포넌트 안의 변수 만들기
🍥 이번 시간에는 useRef를 사용해서 컴포넌트 안의 변수를 만드는 방법에 대해서 알아보겠다. 여기서 말하는 변수는 다음과 같다. 예를 들어 컴포넌트 내부에서 let 키워드를 사용하여 어떤 변수를 선언한다고 가정해보자. 그렇게 하면 다음에 리렌더링 될 때에는 그 변수 값은 초기화 된다. 만약 계속 유지하고 싶으면 즉 어떤 값을 관리하려면 이전에 배웠던 useState를 사용해야 되는데, useState는 상태를 바꾸게 되면 컴포넌트가 리렌더링 된다. 하지만 우리는 가끔씩 어떤 값을 바꿨을 때 리렌더링 할 필요없는 그런 값을 관리하게 될 때도 있다. 그런 경우에는 useRef를 사용하면 된다. 또한 useState는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후로 업데이트 된 상태를 조회 할 ..
2021.04.19 -
[React] useRef로 특정 DOM 선택하기
🥞 이번 시간에는 useRef로 리액트에서 특정 DOM을 선택하는 방법에 대해서 알아보겠다. HTML과 자바스크립트를 사용할 때에는 특정 DOM을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM 셀렉터 함수를 사용하여 DOM을 선택한다. 리액트에서도 가끔씩 DOM을 직접 선택해야하는 상황이 발생할 수 있다. 예를 들어, 특정 엘리먼트의 위치나 크기를 가져와야 한다던지 스크롤바 위치를 가져오거나 설정해야 한다던지, 포커스를 설정해주어야 한다던지 등 다양한 상황이 있다. 그럴때 리액트에서는 ref 라는 것을 사용한다. 🥞useRef라는 hook 사용하기 함수형 컴포넌트에서 ref를 사용하려면 useRef라는 hook을 사용한다. 그리고 클래스 컴포넌트에서는 React...
2021.04.19