[React] ref 사용하기

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}/>
    )
  }
}

useRef vs createRef

• useUse는 한번만 생성되며 (class 컴포넌트에서 사용못한다)
• createRef 는 매번 생성이된다.