useRef
(1) 변수 관리
(2) 요소 접근
(3) focus
useRef를 사용하여 변수 관리 하기
let으로 변수를 생성한 후 count를 올려주면 렌더링시 다시 초기화가 되기 때문에 화면에 값이 반영되지 않는다.
useRef를 사용하면 데이터를 저장할 수 있기 때문에 렌더링 이후에도 값이 유지된다.
이러한 특성으로 렌더링 수를 기록하는 기능으로도 사용할 수 있다.
input에 focus를 주고 싶을 때도 input 내 ref를 이용하여 기능을 구현할 수 있다.
const inputRef = useRef();
const handleClick = () => {
inputRef.current.focus()
}
return (
<div>
<input ref={inputRef} />
</div>
)forward Ref
ref는 예약어이기 때문에 자식 컴포넌트에 prop으로 넘겨줄 수 없다.
이럴 때 forward Ref를 사용한다.
// App.jsx
...
return (
<div>
<ChildComponent ref={inputRef} />
</div>
)
......
const ChildComponent = (props, ref) => {
return (
<input ref={ref} />
)
}
//forwardRef로 감싸준다
export default forwardRef(ChildComponent)forwardRef 를 사용해서 ref를 가져올 경우 Props안에 ref가 있는게 아니라서 두번째 인자로 오는 ref를 가져와야 한다!
ref 라는 이름이 아니라 다른 이름 (ex. refA, refB ...)으로 내려준다면 forwardRef를 사용하지 않고 구조분해할당({refA})으로 가져오면 된다.
