useRef

useRef를 이용해 변수를 관리할 수 있습니다.

 

useRef란?

• 변수 관리
• 특정 DOM을 선택할때 사용하는 React Hooks입니다.

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

ref.current === value

 

useRef vs useState vs let

state를 사용하면 state가 변경되면 컴포넌트가 다시 렌더링 되지만

ref는 렌더링되지 않습니다. 

 

변수는 컴포넌트가 렌더링되면 다시 초기화됩니다.

ref는 생명주기 동안 값은 유지됩니다.

 

Forward Ref

부모 컴포넌트의 ref를 자녀 컴포넌트에 넘겨주고 싶을 때는 그냥 ref를 사용하면 error납니다.

 

해결법:

1. 전달할 때 꼭 ref란 이름으로 전달하고 싶으면, 자식 컴포넌트에 export default forwardRef(ChildComponent) 를 표시하면 작동됩니다.
2. 이름을 변경해서 전달해도 됩니다. ex, refA로 전달하면 정상적으로 전달할 수 있습니다.