useRef를 이용한 변수 관리

useRef 란?

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

변수 관리

state를 사용해서 state가 변하면 컴포넌트가 다시 렌더링되지만 ref를 사용하면 렌더링이 되지 않는다

State vs Ref
-> State는 값이 변할 때마다 렌더링이 되지만 Ref는 값은 유지되고 렌더링만 되지 않는다

State vs Let
Let은 렌더링 시 값이 유지되지 않고 다시 초기화가 된다

Forward useRef

리액트에서 input에 focus를 주고 싶을 때는 어떻게 해야 할까?

const Test = () => {
	const inputRef = useRef();
  	const handleClick = () => {
    	inputRef.current.focus();
    }
    return (
    <>
   		<input ref={inputRef} />
		<button onClick={handleClick}>클릭</button>
    </>
   )
	
}

input을 자녀 컴포넌트에 생성 후 Ref를 props로 넘겨 주면? -> 오류 발생

const ChildComponent = ({ ref }) => {
	return (
    	<input ref={ref} />
    )
}

인자로 props와 ref를 내려주기!