훅을 사용한 컴포넌트 개발 (수용인원)

useCounter() 커스텀 훅 만들기 

 

useCounter.jsx

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;

 

Accommodate.jsx

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 (

    <div style={{ padding: 16}}>

      <p>{`총 ${count}명 수용했습니다.`}</p>

      <button onClick={increaseCount} disabled={isFull}>입장</button>

      <button onClick={decreaseCount}>퇴장</button>

      {isFull && <p style={{color: "red"}}>정원이 가득찼습니다.</p>}

    </div>

  );

}

export default Accommodate;

 

index.js

import React from "react";

// import { createRoot } from 'react-dom/client'; // 수정된 부분

import ReactDOM from "react-dom";

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/NotificaitonList";

import Accommodate from "./chapter_07/Accommodate";

ReactDOM.render(

  <React.StrictMode>

    <Accommodate />

  </React.StrictMode>,

  document.getElementById("root")

);

// ReactDOM.render(

//   <React.StrictMode>

//     <NotificationList />

//   </React.StrictMode>,

//   document.getElementById("root")

// );

// const element = <NotificationList />;

// const root = createRoot(document.getElementById("root"));

// root.render(element);

// ReactDOM.render(

//   <React.StrictMode>

//     <CommentList />

//   </React.StrictMode>,

//   document.getElementById('root')

// );

// const root = ReactDOM.createRoot(document.getElementById("root"));

// //setInterval() 함수는 1,000ms(1초)마다 새롭게 Clock컴포넌트를 root div에 렌더링 하도록 코드를 수정

// setInterval(() => {

//   root.render(

//     <React.StrictMode>

//       <Clock></Clock>

//     </React.StrictMode>

//   );

// }, 1000);

//setInterval() 함수는 1,000ms(1초)마다 새롭게 Clock컴포넌트를 root div에 렌더링 하도록 코드를 수정

// setInterval(() => {

//   ReactDOM.render(

//     <React.StrictMode>

//       <Clock></Clock>

//     </React.StrictMode>,

//     document.getElementById("root")

//   );

// }, 1000);

// const root = ReactDOM.createRoot(document.getElementById('root'));

// root.render(

//   <React.StrictMode>

//     <Library />

//   </React.StrictMode>

// );

// 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();

 

결과

 

10명 정원이 꽉 찼다고 나옴.