[2일차] 이주환 과제 제출합니다.

src/App.jsx

@@ -1,16 +1,25 @@
-import { useState } from "react";
+import { useState, useRef, useEffect } from "react";
+import Counter from "./components/Counter";
+import Value from "./components/Value";
 import reactLogo from "./assets/react.svg";
 import viteLogo from "/vite.svg";
 import "./App.css";
 
 function App() {
   const [count, setCount] = useState(0);
-  const name = "류승찬";
+  const divRef = useRef(null)
+
+  useEffect(() => {
+    console.log('컴포넌트 마운트')
+    divRef.current.style.border = '1px solid red'
+  }, [])
 
   return (
-    <>
-      화이팅
-    </>
+    <div ref = {divRef}>
+      <h1>Hook 과제</h1>
+      <Value value={count}/>
+      <Counter setValue={setCount}/>
+    </div>
   );
 }
 

src/components/Counter.jsx

@@ -0,0 +1,7 @@
+function Counter({ setValue }) {
+  return (
+    <button onClick={() => setValue(prev => prev + 1)}>카운트 증가</button>
+  )
+}
+
+export default Counter

src/components/Value.jsx

@@ -0,0 +1,5 @@
+function Value({ value }) {
+  return <p>현재 카운트: {value}</p>
+}
+
+export default Value