REACT Hooks 노트 useRef 정리

 

useRef

- 값을 저장하는 공간

- State와는 다르게 값이 바뀌더라도 새로 렌더링이 되지 않는다.

- State가 변화하여 렌더링이 되더라도 Ref의 값은 유지된다.

변경이 될때 값이 유지되어야한다면? useRef를 사용할 수 있다.

 

 

useRef는 .current 프로퍼티로 전달되어 초기화된 변경 가능한 ref객체를 반환한다.

const ref = useRef(value);
{current: value}

- 컴포넌트가 계속 렌더링이 되더라도 언마운트가 되기 전까지 값을 유지한다.

 

---

useState 와 useRef의 차이점

- useState는 값이 변경이될때마다 바로바로 렌더링이 된다.

- useRef는 값이 변경이 되더라도 화면이 리렌더링이 될때까지 반영되지 않는다.

  * useRef를 몇번 클릭하고 useState를 클릭하게되면? 지금까지 변화된 값이 적용되어 화면에 렌더링 되는걸 볼 수 있다.

 

만약 value가 변경사항이 많거나 변경이되어도 바로 화면에 보여주지 않아도되는것들이라면

useRef를 사용하는것이 성능면에서 좋을것이다.

 

---

그럼 일반변수를 사용해도되지 않을까? 라고 생각할 수 있다.

- 일반 변수에도 값을 올려주는 함수를 실행했다.

- 리렌더링이 된다는건 App함수가 다시 실행이 된다는걸 의미한다.

- 함수가 실행될때마다 let countVar = 0 가 선언되고 0으로 초기화되기 때문에 값은 리렌더링이 될때마다 0이된다.

 ( 클릭을 할때마다 값은 증가하지만 리렌더링이 되면서 다시 초기화가 된다 )

- 그러나 useRef에 저장한 값은 렌더링이 되더라도 값이 유지된다.

* useRef의 값은 브라우저에 마운팅된 시점부터 마운트가 해제될때까지 같은값을 유지한다.

 

---

이렇게 알 수 있듯이 값의 변화를 감지해야하지만 변화를 한 후 렌더링이 다시 되지 않게 해야할때!

useRef를 사용할 수 있다.

 

음.. useEffect안에서 useState값의 변화를 감지하게 해보았다면 알 수 있다. 무한루프에 빠져버리는 것을..

그럴땐 useRef를 써서 변화를 감지할 후 다시 렌더링이 되지 않게 하면 무한루프에 빠지는걸 막을 수 있다.

 

---

useRef의 활용법 / DOM요소에 접근하기

- input영역을 focus시켜 클릭하지 않아도 되도록 할 수 있다.

- 처음 렌더링이 될 때 실행되도록 useEffect를 사용!

- input태그에 ref={}속성에 inputRef를 넣게 되면 inputRef.current는 input태그가 된다.

- 그렇게 useEffect안에서 focus()를 설정해주면 끝!

 

 

 

리액트 훅스들을 살펴보면 정말 쉽게 코드를 진행할 수 있는 것 같다.

바닐라로 길게 작성하던 코드들을 정말 짧게.. 그러나 사용법들을 제대로 알지 못하면 사용할 수 없다..

하루에 1개씩 리액트 훅스들을 정리해보자!!