🤷‍♀️ [React] forwardRef ❓

🙊React 컴포넌트에 ref prop을 넘겨서
그 내부에 있는 HTML 엘리먼트에 접근을 하게 해주는 함수 알아보자❗

input에 포커스 주려면 클릭해야 자동으로 되는데

🖱버튼 클릭했을 때 포커스 되게 하려면
JS에선 어떻게 해야할까❓

리액트
👉 클릭했을 때 input에 포커스 되게 하고 싶은데

🤔..여기서 어떻게 처리하면 될까❓

input 태그에 ref 등록하면 저 input 부분이
inputRef의 current에 들어있게 됨✅
⬇

클릭하면 포커스 잘 되는 것을 확인 할 수 있음👀

components>ChildComponent.js

App.js 에서 밑줄 친 부분을 ChildComponent로 보낼 것❗

ChildComponent 컴포넌트 태그 넣어주고

저 부분을 ChildComponent에 넣어주고

⬇ inputRef는 App 컴포넌트에 있으니 내려줘야 함

ChildComponent에 ref 가져와서

ref 넣어줌

⚠Warning 콘솔창에 뜸

ChildComponent: 'ref' is not a prop
👉 ref 라는 것을 저렇게 ({ ref }) 내려줄 수 없음🙅‍♀️

💁‍♀️forwardRef 사용하기

ChildComponent(자녀) 컴포넌트에서forwardRef로 감싸주기

그래도 Warning 뜸

ChildComponent 함수는 두 개의 파라미터를 받음➡props & ref

⬇

이젠 경고 안 뜨고 올바르게 잘 됨✨