[리액트(React)] Custom Hook

// Custom Hook

- 이름이 use로 시작하고 내부에서 다른 Hook을 호출하는 함수

- 상태값을 사용하고 있는 Custom Hook이 여러 곳에서 사용될 때, 각 컴포넌트들은 독립적인 상태 snapshot을 갖는다.
   > 한 컴포넌트에서 state를 바꿔도 다른 컴포넌트의 state는 바뀌지 않는다.

---

import { 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;

 

import { useEffect, useState } 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(`is Full: ${isFull}`);
  });

  useEffect(() => {
    setIsFull(count >= MAX_CAPACITY);
    console.log(`Current count value: ${count}`);
  }, [count]);

  return (
    <div style={{ padding: 16, textAlign: 'center' }}>
      <p>{`총 ${count}명 수용`}</p>

      <button
        onClick={increaseCount}
        disabled={isFull}
        style={{ marginRight: 5 }}
      >
        입장
      </button>
      <button onClick={decreaseCount}>퇴장</button>

      {isFull && <p style={{ color: 'red' }}>만원</p>}
    </div>
  );
}

export default Accommodate;