From 5fc58d65b5f8e3cf0132f2097f9bcb445690f957 Mon Sep 17 00:00:00 2001 From: seunghyema Date: Sun, 29 Mar 2026 20:40:01 +0900 Subject: [PATCH] Add files via upload --- accommodate.jsx | 35 +++++++++++++++++++++++++++++++++++ useConter.jsx | 12 ++++++++++++ 2 files changed, 47 insertions(+) create mode 100644 accommodate.jsx create mode 100644 useConter.jsx diff --git a/accommodate.jsx b/accommodate.jsx new file mode 100644 index 0000000..382011e --- /dev/null +++ b/accommodate.jsx @@ -0,0 +1,35 @@ +import React, { useState, useEffect } from "react"; +import useCounter from "./useCounter"; + +const MAX_CAPACITY = 10; + +function Accommodate(props) { + const [isFull, setIsFull] = useState(false); + const [count, increaseCount, decreaseCount] = useCounter(0); + + useEffect(() => { + console.log("======================"); + console.log("useEffect() is called."); + console.log(`isFull: ${isFull}`); + }); + + useEffect(() => { + setIsFull(count >= MAX_CAPACITY); + console.log(`Current count value: ${count}`); + }, [count]); + + return ( +
+

{`총 ${count}명 수용했습니다.`}

+ + + + + {isFull &&

정원이 가득찼습니다.

} +
+ ); +} + +export default Accommodate; \ No newline at end of file diff --git a/useConter.jsx b/useConter.jsx new file mode 100644 index 0000000..0e97308 --- /dev/null +++ b/useConter.jsx @@ -0,0 +1,12 @@ +import React, { useState } from "react"; + +function useCounter(initialValue) { + const [count, setCount] = useState(initialValue); + + const increaseCount = () => setCount((count) => count + 1); + const decreaseCount = () => setCount((count) => Math.max(count - 1, 0)); + + return [count, increaseCount, decreaseCount]; +} + +export default useCounter; \ No newline at end of file