인프런 커뮤니티 질문&답변

안녕하세요 선생님 Char 7 실습 코드를 localhost:3000 포트에서 처음 랜더링 했을 때 그림과 같이 useEffect() 각각 2번씩 (총4번)호출되어 질문드립니다.

코드는 다음과 같습니다. 각각 1번씩 호출되지 않고 2번씩 호출되는 이유가 뭘까요.. ㅠ

    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;