📚 Reference

• 공식 문서 1
• 공식 문서 2
• 공식 문서 3
• 참고 자료 1
• 참고 자료 2
• 참고 자료 3
• 참고 자료 4
• 참고 자료 5

📜 Chapter

Class component

Function component

‣

useState

ref

forwardRef

‣

useRef

• useRef
• useRef는 렌더링에 영향을 주지 않는 참조(reference) 값을 관리하는 훅이다.
• useRef로 생성된 값은 컴포넌트가 다시 렌더링되어도 초기화되지 않고 유지된다.

const ref = useRef(value)

• 함수형 컴포넌트에서 useRef를 사용하면 ref Obejct를 반환해준다.

//ref Object
{current: value}

// 예시
const ref = useRef("hi")
{current: "hi"}

const ref = useRef("hello")
{current: "hello"}

const ref = useRef("nice")
{current: "nice"}

• 우리가 저장하는 값은 current로 저장이 된다.
• ref Object는 수정이 가능하다.
• 반환된 ref는 컴포넌트의 전 생애 주기 동안 유지가 된다. → 컴포넌트가 계속해서 렌더링이 되어도 컴포넌트가 unmount 되기 전까지 값을 그대로 유지한다.
• useRef는 값이 변화해도 컴포넌트를 랜더링 시키지 않는다.
  • 렌더링을 유발하지 않는다.
    • React의 여러 리렌더링 원인에 useRef().current의 변경은 포함되지 않는다. 즉, useRef 값이 변경될 때 ref는 React에게 해당 값의 변경을 알려주지 않는다.
    • 만약 useRef 값의 변경에 따라 특정 로직을 수행하고 싶다면, ref 대신 상태 값을 사용하거나, useEffect의 dependency array 내부에서 해당 ref를 참조할 수 있게 해야 한다.
• 각 렌더링에서 참조하는 값을 동일한 값으로 유지한다.

용도

state와 비슷하게 값을 저장하는 공간이다.