diff --git a/src/App.jsx b/src/App.jsx
index 5d62758..1d45d97 100644
--- a/src/App.jsx
+++ b/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>
   );
 }
 
diff --git a/src/components/Counter.jsx b/src/components/Counter.jsx
new file mode 100644
index 0000000..e62308f
--- /dev/null
+++ b/src/components/Counter.jsx
@@ -0,0 +1,7 @@
+function Counter({ setValue }) {
+  return (
+    <button onClick={() => setValue(prev => prev + 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