From 84605e5f00261bba3b4f485b7c9bd872e620bbfa Mon Sep 17 00:00:00 2001
From: jhlarry1109 <jhlarry1109@gmail.com>
Date: Thu, 31 Jul 2025 16:09:38 +0900
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20useRef=EB=A1=9C=20div=20=EC=B0=B8?=
 =?UTF-8?q?=EC=A1=B0,=20useEffect=EB=A1=9C=20=EB=A7=88=EC=9A=B4=ED=8A=B8?=
 =?UTF-8?q?=20=EC=8B=9C=20=ED=85=8C=EB=91=90=EB=A6=AC=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=20=EC=A0=81=EC=9A=A9=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 5d62758..97dd398 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,16 +1,21 @@
-import { useState } from "react";
+import { useState, useRef, useEffect } from "react";
 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>
+    </div>
   );
 }
 

From 7ea8afce6b6e5dbef210275464babc7018348139 Mon Sep 17 00:00:00 2001
From: jhlarry1109 <jhlarry1109@gmail.com>
Date: Thu, 31 Jul 2025 16:30:38 +0900
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20useState=EC=99=80=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80=EB=90=9C=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A5=BC=20=ED=86=B5?=
 =?UTF-8?q?=ED=95=9C=20=EC=B9=B4=EC=9A=B4=ED=8A=B8=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx                | 4 ++++
 src/components/Counter.jsx | 7 +++++++
 src/components/Value.jsx   | 5 +++++
 3 files changed, 16 insertions(+)
 create mode 100644 src/components/Counter.jsx
 create mode 100644 src/components/Value.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 97dd398..9881436 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,4 +1,6 @@
 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";
@@ -15,6 +17,8 @@ function App() {
   return (
     <div ref = {divRef}>
       <h1>Hook 과제</h1>
+      <Value value={count}/>
+      <Counter count={count} setValue={setCount}/>
     </div>
   );
 }
diff --git a/src/components/Counter.jsx b/src/components/Counter.jsx
new file mode 100644
index 0000000..ffb1d18
--- /dev/null
+++ b/src/components/Counter.jsx
@@ -0,0 +1,7 @@
+function Counter({ setValue }) {
+  return (
+    <button onClick={() => setValue(count+1)}>카운트 증가</button>
+  )
+}
+
+export default Counter
\ No newline at end of file
diff --git a/src/components/Value.jsx b/src/components/Value.jsx
new file mode 100644
index 0000000..9bd9b67
--- /dev/null
+++ b/src/components/Value.jsx
@@ -0,0 +1,5 @@
+function Value({ value }) {
+  return <p>현재 카운트: {value}</p>
+}
+
+export default Value
\ No newline at end of file

From 2a8551e2e26f30ad55a7645f72590bfd32641e5c Mon Sep 17 00:00:00 2001
From: jhlarry1109 <jhlarry1109@gmail.com>
Date: Thu, 31 Jul 2025 16:39:24 +0900
Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=EC=B9=B4=EC=9A=B4=ED=8A=B8=EA=B0=80?=
 =?UTF-8?q?=20=EC=95=88=20=EC=98=AC=EB=9D=BC=EA=B0=80=EB=8D=98=20=EB=B2=84?=
 =?UTF-8?q?=EA=B7=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx                | 2 +-
 src/components/Counter.jsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 9881436..1d45d97 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -18,7 +18,7 @@ function App() {
     <div ref = {divRef}>
       <h1>Hook 과제</h1>
       <Value value={count}/>
-      <Counter count={count} setValue={setCount}/>
+      <Counter setValue={setCount}/>
     </div>
   );
 }
diff --git a/src/components/Counter.jsx b/src/components/Counter.jsx
index ffb1d18..e62308f 100644
--- a/src/components/Counter.jsx
+++ b/src/components/Counter.jsx
@@ -1,6 +1,6 @@
 function Counter({ setValue }) {
   return (
-    <button onClick={() => setValue(count+1)}>카운트 증가</button>
+    <button onClick={() => setValue(prev => prev + 1)}>카운트 증가</button>
   )
 }