[별코딩] useRef()

< useRef >

1. 저장 공간

State 변화 -> 렌더링 -> 컴포넌트 내부 변수들 초기화

Ref의 변화 -> No 렌더링 -> 변수들의 값이 유지

State의 변화 -> 렌더링 -> 그래도 Ref의 값은 유지

 

=> 렌더링 시에 변경되지 말아야 할 값을 다룰 때 편리하다.

 

2. DOM요소에 접근

손쉽게 input에 접근 가능

 

 

- useRef의 장점

컴포넌트의 값이 바뀔 때마다 렌더링이 발생된다면 성능적인 측면에서 좋지 않다. 이때 자주 바뀌는 값을 useState()가 아닌 useRef를 통해 받는다면 성능적인 부분에서 더 뛰어나게 구현할 수 있다.

 

Ref와 Var의 값을 올리고 랜더링 했을 때 Var의 값은 초기화되고 Ref의 값은 그대로 유지되는 것을 볼 수 있다.

이유는 아래와 같다.

 

 

- 변수와 useRef()의 차이

=> 컴포넌트가 렌더링될 때 컴포넌트가 나타내는 함수가 계속 호출된다. 함수가 호출된다는 의미는 함수 내부에 있는 변수들이 초기화된다는 뜻이다. 하지만 useRef는 렌더링되어도 변수값을 그대로 유지한다. 그 말은 즉, 컴포넌트가 마운트된 시점부터 마운트 해제되는 시점까지 값을 유지한다는 뜻이다. 

 

그럼 언제 사용하는게 좋을까????

=> 변화는 감지해야하지만, 그 변화가 렌더링을 발생시키면 안될 때 사용!!!