[리액트 공부] 노마드 코더, 실전형 리액트 Hooks 10개 - useClick

노마드 코드의 무료 강의 웹사이트는 아래 주소로 가면 된다.

nomadcoders.co/

 

[예제 코드]

 

import { StrictMode, useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

const App = () => {
  const potato = useRef();
  setTimeout(() => console.log(potato.current), 5000)
  return (
    <div className="App">
      <div>Hi</div>
      <input ref={potato} placeholder="la" />
    </div>
  );
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

 

728x90

 

[강의 설명]

 

reference는 document.getElementbyId()와 같이 component의 어떤 부분을 선택할 수 있는 방법이다.

useRef의 이름은 potato라고 지정한 것처럼 우리가 임의로 지정할 수 있다. 

setTimeout(() => console.log(potato), 5000)를 지정하면 5초후에 console에서 값이 아래와 같이 찍히는 것을 확인할 수 있다.

{current: HTMLInputElement}

▷current: <input placeholder="la"></input>

 

그러므로 우리는 potato.current로 값을 지정해주기로 한다.

그러면 potato.current인 <input placeholder="la"></input> 가 콘솔창에 찍히는 것을 확인할 수 있다.