reactJs 확장프로그램 devtool 설치

https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

React Developer Tools - Chrome 웹 스토어

 

해당 사이트에서 devtools 확장프로그램 추가

 

App.jsx

import Counter from "@/components/Counter";
import UserCard from "@/components/UserCard";

function App() {
  const user = {
    name: "Jaesung",
    age: 30,
    role: "Frontend Dev",
  };

  return (
    <div style={{ padding: 20 }}>
      <h1>React DevTools Test</h1>

      <Counter initial={5} />
      <Counter />

      <UserCard user={user} />
    </div>
  );
}

export default App;

 

components/Counter.jsx

import { useState } from "react";

function Counter({ initial = 0 }) {
    const [count, setCount] = useState(initial);

    return (
        <div style={{ border: "1px solid #ccc", padding: 12, marginBottom: 12 }}>
            <h3>Counter</h3>
            <p>count: {count}</p>
            <button onClick={() => setCount((c) => c + 1)}>+</button>
            <button onClick={() => setCount((c) => c - 1)}>-</button>
        </div>
    );
}

export default Counter;

 

components/UserCard.jsx

function UserCard({ user }) {
    return (
        <div style={{ border: "1px solid #aaa", padding: 12 }}>
            <h3>UserCard</h3>
            <p>name: {user.name}</p>
            <p>age: {user.age}</p>
            <p>role: {user.role}</p>
        </div>
    );
}

export default UserCard;

 

 

 

 

 

개발자도구 - Components를 클릭해보면 각 컴포넌트의 props hooks등을 확인할수 있다.