Hook 사용

• custom hook인 useCounter()

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;

• hook 사용 부분

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(cout >= 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>
  )
}