useRef는 뭘까아요~~~?

useRef

useRef는 rerendering 이 필요하지 않은 값을 참소 할 수 있는 React Hook 이다.

• initialValue : ref객체의 current프로퍼티 초기 설정값이다. 이 인자는 초기 렌더링 이후 무시된다!
• ref.current 프로퍼티를 변경해도 컴포넌트를 다시 렌더링 하지 않습니다.

사용법

import { userRef } from "React";

const ref = useRef(initialValue);

useRef는 처음에 제공한 initialValue로 설정된 단일 프로퍼티가 있는 ref객체를 반환한다.

다음 렌더링에서도 동일한 객체를 반환(초기화).

ref를 사용하면 다음을 보장합니다:

• (렌더링할 때마다 재설정되는 일반 변수와 달리) 리렌더링 사이에 정보를 저장할 수 있습니다.
• (리렌더링을 촉발하는 state 변수와 달리) 변경해도 리렌더링을 촉발하지 않습니다.
• (정보가 공유되는 외부 변수와 달리) 각각의 컴포넌트에 로컬로 저장됩니다.

useState와 useRef 의 차이점

ref

1 useRef(initialValue)는 {current:initialValue} 를 반환
2 state 가 바뀌어도 리렌더 x
3 렌더링 중에는 current 값을 일거나 쓰면 안된다!

state

1 useState(initailValue)는 state 변수의 현재 값과 setter 함수[value,setValue] 를 반환
2 state 가 바뀌면 리렌더 o
3 언제든 state를 읽을 수 있다.

ref의 사용

1 컴포넌트의 형태에 영향을 미치치 않는 API 통신 할 떄 사용
2 timeout
3 다음 페이지에서 다루는 DOM 저장 및 조작
4 JSX를 계산,필요하지 않은 다른 객체 저장

---

요약
1 Refs는 렌더링에 사용되지 않는 값을 고정하기 위한 탈출구이며, 자주 필요하지는 않습니다.
2 ref는 읽거나 설정할 수 있는 current라는 프로퍼티를 호출할 수 있는 자바스크립트 순수객체입니다.
3 useRef Hook을 호출해 ref를 달라고 React에 요청할 수 있습니다.
4 state와 마찬가지로 ref는 컴포넌트의 렌더링 간에 정보를 유지할 수 있습니다.
5 state와 달리 ref의 current 값을 설정하면 리렌더가 트리거되지 않습니다.
6 렌더링 중에 ref.current를 읽거나 쓰지 마세요. 컴포넌트를 예측하기 어렵게 만듭니다.