렌더링 관련 질문

안녕하세요, 소플입니다.

먼저 실습에서 사용된 Accommodate 컴포넌트의 코드는 아래와 같습니다.

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;

여기서 자세히 보시면 첫 번째 useEffect()에는 의존성 배열(dependency array)이 생략되어 있습니다.

이것은 useEffect() 훅이 아무 것에도 의존하지 않는다는 것이며,

결국 매번 렌더링 될 때마다 Effect 함수가 실행됩니다.

count 값이 변경되면 count 값을 의존성 배열에 갖고 있는 두 번째 useEffect()의 Effect 함수가 실행되며,

해당 Effect 함수 내에서 setIsFull() 함수를 호출하여 isFull이라는 state의 값이 변경되고,

이로 인해 재렌더링이 일어나면서 첫 번째 useEffect()의 Effect 함수도 실행되는 것입니다.

그리고 추가로 useEffect()훅의 의존성 배열에 빈 배열(empty array)을 넣게 되면,

컴포넌트가 처음 마운트 된 이후에만 Effect 함수가 실행됩니다.

이러한 부분을 다시 기억하면서 코드가 실행되는 과정을 익혀보시기 바랍니다!

감사합니다.