Ref
원하는 시점에 실제 DOM노드에 접근하고 싶을 때 사용할 수 있는 prop
useRef라는 함수로 ref객체를 만들고 inputRef라는 변수에다가 지정해준다.
그리고 useEffect함수를 사용해서
처음 랜더링되었을 때만 inputRef을 콘솔로 보여주기
그리고 input태그에는 inputRef를 prop으로 내려준다.
확인해보면 콘솔에 출력된
Ref객체가 있고
커서를 가져다놓으면 화면에 랜더링된
파일 인풋을 가리키고 있는 것을 확인할 수 있다.
이런 식으로 ref를 사용하면 실제 DOM노드를 직접 참조할 수 있다.
주의
DOM노드는 반드시 랜더링이 끝나야 생긴다.
ref객체의 current값도 화면에 컴포넌트가 랜더링되었을 떄만 존재한다.
조건부 랜더링으로 컴포넌트가 사라지거나 하는 경우
이 값이 없을 수도 있다.
항상 inputRef에 current값이 있는지 확인하고 사용한다.(if문 사용)
