import React, { useState, useCallback, useEffect} from "react";

const App=()=>{

const [count,setCount]=useState(0);
const countUp=()=>{
setCount(count=>count+1);
}

const countDown=()=>{
setCount(count=>count-1);
}

return(
<div>
<p>count:{count}</p>
<AppTwo countUp={countUp} countDown={countDown}/>
</div>
)
}

const AppTwo=({countUp, countDown})=>{
useEffect(()=>{console.log('re-rendering.')}) //check re-rendering

return(
<div>
<button onClick={countUp}>count Up</button>
<button onClick={countDown}>count Down</button>
</div>
)
}

export default App;


이 코드에서 AppTwo 컴포넌트는 App컴포넌트로부터 prop을 받고있는데요, prop을 받고있는 자식컴포넌트가 리렌더링되려면, 해당 prop의 변화를 감지해야 하잖아요? 여기서 App컴포넌트가 리렌더링되면, prop으로 받는 두 함수가 참조하는 메모리 주소는 같지만, 단지 새롭게 생성되었단 이유만으로 AppTwo컴포넌트도 리렌더링 되고 있는건가요? 아! 만약 함수가 새롭게 생성되면 참조하고 있는 메모리 주소는 같아도, 메모리속의 로직은 새롭게 생성되는 건가요?