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

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("===========배열있음");
        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;

import React, { useState } from "react";

//custom Hook
//초기 카운트 값을 파라미터로 받아서 카운트라는 이름의
//state를 생성하여 값을 제공하고 증감을 편리하게 할 수 있도록 하는 함수
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 React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import Library from './chapter03_jsx/Library'; //컴포넌트 추가
import Clock from './chapter04_elements/Clock';
import CommentList from './chapter05_component_props/CommentList';
import NotificationList from './chapter06_state/NotificationList';
import Accommodate from './chapter07_hook/Accommodate';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  //<React.StrictMode>
    <Accommodate />
  //</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();

위와 같이 Accomodate.jsx를 작성했습니다만 정원을 다 채웠을 경우 배열 있음이 한번 더 출력되는 현상이 나왔습니다.

의존성 배열이 있는 부분의 ,{count}만 넣으면 오류 워닝이 떠서 배열 취급하기 위해 []를 추가했습니다.

[]를 빼고 실행했을 경우 최대 카운트가 먹히지 않아 무한정으로 들어갑니다.

제가 뭔가 잘못 한 걸까요?