React #17 (훅, 상태관리 - useRef)

 

useRef 

• DOM 요소에 직접 접근하기
• 리렌더링되지 않는 값 저장하기

 

src/components/MyComponent.tsx

import { useRef } from "react";

export default function MyComponent() {
  const inputRef = useRef<HTMLInputElement>(null);

  const focusInput = () => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  return (
    <div className="p-4 m-4 border border-red-300">
      <input ref={inputRef} className="border border-blue-300" type="text" />
      <button onClick={focusInput} className="bg-green-300">
        포커스 주기
      </button>
    </div>
  );
}

 

 

src/pages/RefTest.tsx

// itcr
import MyComponent from "../components/MyComponent";

export default function RefTest() {
  return (
    <div>
      <h1>RefTestPage</h1>
      <MyComponent />
      <MyComponent />
      <MyComponent />
    </div>
  );
}

 

 

src/App.tsx

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import "@fontsource/material-icons";
import RefTest from "./pages/RefTest";


function App() {
  return (
    <div className="App">
      <RefTest />
    </div>
  );
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

※ 여기서 실습했던 코드는 다음 글인 #18 에서 확인 가능.