useRef란 무엇일까요?
useRef는 리렌더링이 되지 않기에 렌더링의 영향이 미치지 않았으면 하는 변수를 생성할 때 사용됩니다.
useRef를 이용하면 컴포넌트가 렌더링하는 특정 DOM요소에 접근할 수 있습니다. 또한 DOM요소에 접근 할 수 있음으로 해당 요소를 조작하는 것이 가능합니다.
useRef의 Ref란 무엇일까요?
Reference로 참조하다라는 의미를 가지고 있습니다.
useRef는 함수형 컴포넌트, 클래스형 컴포넌트 이렇게 두 가지가 있습니다.
클래스형 컴포넌트 VS 함수형 컴포넌트
1-1. 클래스형 컴포넌트
클래스형 컴포넌트란 react 컴포넌트 선언하는 두가지 방식 중 하나입니다. 현재 자주 사용하지 않지만, 사용하는 기업들이 있습니다. 그 프로젝트의 유지보수를 위해서는 클래스형 컴포넌트를 사용합니다.
1-2. 클래스 컴포넌트 사용이유
클래스형 컴포넌트는 코드 안에 라이프사이클 기능과 state 기능이 구현이 가능하며 클래스형 컴포넌트를 사용할 경우에는
render()함수가 필수적으로 사용되어야 합니다.
- (라이프사이클이란 컴포넌트가 브라우저 상에 나타나고, 업데이트되고, 사라지게 되는 과정을 뜻합니다.)
2-1. 함수형 컴포넌트
함수형 컴포넌트란 react 컴포넌트 선언하는 두가지 방식 중 하나로 클래스형 컴포넌트보다 많이 사용되는 컴포넌트 선언 방식입니다. (그 이유는 뒤에...) 함수형 컴포넌트는 클래스 컴포넌트와는 달리 라이프사이클 기능이 없습니다. 하지만 ReactHook을 사용해 라이프사이클과 state를 구현할 수 있습니다.
useRef VS useState
공통점?
- 컴포넌트 내부의 변수로 활용이 가능합니다.
- 둘 다 React Hooks의 일부이기에, React 컴포넌트에서 상태를 관리하는 데 사용됩니다.
- useRef, useState는 렌더링되는 동안에는 값에 변화가 없습니다. (렌더링이 다 됬을 때 값에 변화가 생깁니다.)
차이점?
useRef
- Reference 객체를 생성합니다.
- 어떠한 경우에도 리렌더링을 하지않습니다. 그렇기에 렌더링과 상관없이 값을 유지하고 싶을 때 사용됩니다.
- 사용 목적은 DOM요소에 접근 하기 위해서 사용됩니다.
- 주로 DOM 요소의 참조를 보관하는 데 사용됩니다.
useState
- State를 생성합니다.
- 상태가 변경되면 컴포넌트를 리렌더링합니다.
- React 컴포넌트 내에서 상태를 관리할 때 사용됩니다.
- 상태값을 지니는 변수와 해당 변수를 업데이트하는 함수를 반환합니다.
useRef는 왜 사용할까요?
useRef는 값을 변경 시 렌더링을 발생시키지 말아야하는 값을 다룰 때 사용됩니다. 쉽게 말하면 값의 변화는 감지하지만 리렌더링이 되면 안될 때 useRef가 사용됩니다.
만약 타이머 웹을 만드는 데 useState를 사용하면 어떻게 될까요?
1초가 지날 때 마다 초를 보여주는 컴포넌트를 리렌더링을 시킴으로써 웹에 속도를 느리게 해버립니다. 반면 useRef를 사용하면 컴포넌트를 리렌더링하지 않기 때문에 웹의 속도를 빠르게 할 수 있습니다. 또한 input태그에 접근 할 때 많이 쓰입니다. 바로 input태그를 건들지 않아도 포커스 시켜 input태그를 깜빡깜빡 거리게 할 때 사용되기도 합니다
정리하자면 useRef는 값의 변경을 감지하고 싶지만 리렌더링을 발생시키고 싶지 않을 때 사용되며, 특히 DOM 조작에 유용한 도구로 활용됩니다.
useRef의 장점?
일단 리렌더링을 시키지 않기 때문에 웹의 속도를 느리게 할 수 있는 요소를 배제할 수 있습니다. 그리고 useState처럼 값을 저장 할 수 있어 계속 변화하는 값을 저장할 때 유용합니다, 만약 타이머에서 그냥 변수를 사용하게 되면 어떻게 될까요?
당연히 숫자는 움직이지 않습니다. 이유는 State란 무엇일까?에 적어 두었습니다.
