React_속성으로 함수 사용

 

 

import { useRef, useState} from "react"

export default function App(){

  const inputRef = useRef();

  const [showText, setShowText] = useState(true);

  return (

    <>

    <h1>App</h1>

      {showText && <input type="text" ref={inputRef}></input>}

      <button onClick={() => setShowText(() => !showText)}>텍스트 보이기/가리기</button>

    <hr></hr>

    {/* 다음 버튼은 위의 버튼이 보이는 경우에만 동작 / 가리기가 된 상태에서는 에러 발생 */}

    <button onClick={() => inputRef.current.focus()}>텍스트1로 이동 에러</button>

    <button onClick={() => inputRef.current && inputRef.current.focus()}>텍스트2로 이동</button>

    <button onClick={() => showText && inputRef.current.focus()}>텍스트3으로 이동</button>

    </>

  )

}