React, 커스텀 훅, Custom Hooks

useCounter.jsx

import React, { useState } from "react";

function useCounter(initialValue) { // 커스텀훅, useCounter: 숫자를 관리

    const [count, setCount] = useState(initialValue); // count라는 상태(state)와 그 상태를 업데이트하는 함수 setCount를 생성

    const increaseCount = () => { // 숫자를 1 증가시키는 함수
        setCount((currentCount) => currentCount + 1);
    };

    const decreaseCount = () => { // 숫자를 1 감소시키는 함수 (0보다 작아지지 않게 제한)
        setCount((currentCount) => Math.max(currentCount - 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() {

    const [isFull, setIsFull] = useState(false);  // 상태: 현재 수용 인원이 최대치를 넘었는지 여부
    const [count, increaseCount, decreaseCount] = useCounter(0); // *커스텀 훅, 현재 카운트 값과 증가/감소 함수를 가져옴

    useEffect(() => { // useEffect 1: 컴포넌트의 마운트/업데이트 여부를 확인, useEffect 는 하나의 컴포넌트 안에서 여러개 사용할 수 있음
        console.log("======================");
        console.log("useEffect() 호출됨");
        console.log(`isFull 상태: ${isFull}`);
        return () => { // 컴포넌트가 mount 해제되기 전에 실행됨
            console.log(`comonentWillUnmount`);
        }
    }); // 의존성 배열이 없으므로 마운트될 때만 실행

    useEffect(() => { // useEffect 2: isFull 상태 변경 시마다 호출 (최소 count가 변경될 때마다 호출됨)
        setIsFull(count >= MAX_CAPACITY); // 최대치와 비교하여 상태 업데이트
        console.log(`현재 인원: ${count}`);
    }, [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 ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import PlayGround from "./chapter_00/PlayGround";

import Accommodate from "./chapter_07/Accommodate";

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

root.render(
    <React.StrictMode>
        <PlayGround />
        <Accommodate />
    </React.StrictMode>
);

reportWebVitals();

// https://github.com/soaple/first-met-react-practice-v18/tree/master/src

 

결과

출처

https://www.inflearn.com/course/처음-만난-리액트

https://github.com/soaple/first-met-react-practice-v18/tree/master/src