hooks 에서는 클래스형태가 아니기 때문에 인스턴스에서 사용하는 this
를 사용하지 못하므로
콜백ref ref={el => this.nameRef = el}
방식은 사용하지 못한다.
참고로 React Docs 에서는 const nameRef = createRef()
를 권장한다.
ref 사용법
class CustomTextInput extends React.Component{ constructor(props){ this.inputRef = React.createRef() } focusTextInput = () => { this.inputRef.current.focus() } render(){ return( <input type="text" ref={this.inputRef}/> ) } }
부모클래스에서 자식클래스의 함수를 호출하기
-커스텀 컴포넌트의 ref는 해당 컴포넌트의 인스턴스를 가르킨다
-인스턴스 이므로 모든 데이터와 함수를 가져올수 있다class AutoFocusText extends React.Component{ constructor(props){ this.textRef = React.createRef() } componentDidMount(){ console.log(this.textRef.current.state) this.textRef.current.focusTextInput() } render(){ return( <CustomTextInput ref={this.textRef}/> ) } }
Hooks 컴포넌트에서 ref 사용법
-부모 컴포넌트에서는 ref를 선언해도 인스턴스가 없으므로 사용하지 못한다.
-부모 컴포넌트에서 자식의 값을 읽기 위해서는 react 에서 제공하는 함수를 사용해야 한다.forwardRef()를 랩핑해서 사용하고 엘리먼트에 받아온 ref를 바로 사용하는 방법
const CustomTextInput = forwardRef((props, ref) => { return ( <input type="text" ref={ref}/> ) })
forwardRef()
를 랩핑해서 사용하고useImperativeHandle()
를 사용 데이터, 함수등을 부모에게 전달
useImperativeHandle
두번째 인자는 리턴 함수이다const CustomTextInput = forwardRef((props, ref) => { const getData = () => { console.log("data") } // ref에 함수를 넘기는 방법 useImperativeHandle(ref, getData) // ref에 json 객체를 넘기는 방법 (내장 데이터 & 함수) useImperativeHandle(ref, () => ({a:1, getData)) return ( <input type="text"/> ) })
useImperativeHandle()
콜백 JSON 객체에 엘리먼트 포함시키는 방법const CustomTextInput = forwardRef((props, ref) => { const inputEl = useRef() useImperativeHandle(ref, () => ({a:1, inputEl)) return ( <input type="text" ref={inputEl}/> ) })
16.2 이하의 경우 forwardRef를 사용하지 못하는 경우
- 상위 컴포넌트에서 ref 를 만들고 자식에게 전달하여 사용
const CustomTextInput = (props) => { return <input type="text" ref={props.inputRef}/> } class Parent extends React.Component{ constructor(props){ this.inputRef = React.createRef() } render(){ return( <CustomTextInput inputRef={this.inputRef}/> ) } }