[3주차] 최수연 리액 과제 제출

Accommodate.jsx

@@ -0,0 +1,41 @@
+import React, { useState, useEffect } from "react";
+import useCounter from "./useCounter";
+
+const MAX_CAPCITY = 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_CAPCITY);
+        console.log(`Current count value: ${count}`);
+    }, [count]);
+
+    return (
+        <div style={{padding: 16 }} >
+            <p>{`c총 ${count}명 수용했습니다.`}</p>
+
+            <button onClick={increaseCount} disabled={isFull}>
+                입장
+            </button>
+            <button onClick={decreaseCount}> 퇴장 </button>
+
+            {isFull && <p style= {{color:"red"}}>정원이 가득찼습니다.</p>}
+        </div>
+    );
+}
+
+export default Accommodate;
+
+
+
+
+

index.js

@@ -1,30 +1,14 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import "./index.css";
-import App from "./App";
-import reportWebVitals from "./reportWebVitals";;
-import Library from './chapter_03/Library';
-import Clock from './chapter_04/Clock';
-import CommentList from './chapter_05/CommentList';
-import NotificationList from './chapter_06/NotificationList';
-import Accommodate from './chapter_07/Accommodate';
-import ConfirmButton from './chapter_08/ConfirmButton';
-import LandingPage from './chapter_09/LandingPage';
-import AttendanceBook from './chapter_10/AttendanceBook';
-import SignUp from './chapter_11/SignUp';
-import Calculator from './chapter_12/Calculator';
-import ProfileCard from './chapter_13/ProfileCard';
-import DarkOrLight from './chapter_14/DarkOrLight';
-import Blocks from './chapter_15/Blocks';
-
-ReactDOM.render(
-  <React.StrictMode>
-    <Accommodate />
-  </React.StrictMode>,
-  document.getElementById('root')
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+import Accommodate from './chapter_07/Accommodate';
+
+ReactDOM.render(
+    <React.StrictMode>
+        <Accommodate/>
+    </React.StrictMode>,
+    document.getElementById('root')
+);

useCounter.jsx

@@ -0,0 +1,13 @@
+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;