4.2 React 렌더링 과정 에서 왜 컴포넌트가 두 번씩 호출될까요?

/*FunctionalComponent.jsx파일*/
import {useEffect,useState} from 'react';

function FunctionalComponent() {
    console.log('Function Beginning');
    const [value, setValue] = useState(0);

    useEffect(() => {
        console.log('Function useEffect[]');

        return () => {
            console.log('Function useEffect return[]');
        }
    },[]);

    useEffect(() => {
        console.log('Function useEffect[value]');

        return () => {
            console.log('Function useEffect return[value]');
        }
    },[value]);

    console.log('Function End');

    return (
        <div>
            <h1>!FunctionalComponent</h1>
            <h1>value: {value}</h1>
            <button onClick={() => {
                setValue((state) => state + 1)
            }}
            >
                Increase value
            </button>
        </div>
    );
}

export default FunctionalComponent

/*App.jsx파일*/
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import axios from 'axios';
import FunctionalComponent from './practice/FunctionalComponent'
function App() {

  return (
    <FunctionalComponent />
  )
}

export default App