useRef

html 요소랑 이을 수 있음.

 

function Main() {
  const [text, setText] = useState('');
  const textRef = useRef();

  const handleChange = (e) =>{
    setText(e.target.value);
    console.log(textRef.current);
  }

  const handleClick = ()=>{
    console.log(text);
    textRef.current.value = "";
  }

  return (
    <main>
      <div className="inner">
        <input ref={textRef} type="text" name="" id="" value={text} onChange={handleChange}/>
        <button onClick={handleClick}>버튼</button>
      </div>
    </main>
  );
}

export default Main;

저렇게 태그에 ref={정의한ref} 하고

ref에 접근할 때는 ref.curret로 접근해야 요소가 나옴.

 

 

난 직관적인거 좋아해서 그러면 useRef만 쓰면 저렇게 저 요소에 접근해서 value만 알아오면 되지 않나 굳이 useState를 사용해야 하나? 했는데,

 

state는 감지기임.

그러니까 저 값 하나 바꾸면 저 값을 참조하는 모든 곳을 랜더링 시킬 수 있음.