React.memo 얕은비교 질문드립니다

Question

const App=()=>{ const [count,setCount]=useState(0); function countUp(){ setCount(count=>count+1); } function countDown(){ setCount(count=>count-1); } return(

count:{count}

) } const AppTwo=React.memo( ({countUp, countDown})=>{ useEffect(()=>{ console.log('re-rendering.') }) return(

) })위 코드에서 {countUp}함수와 {countDown}함수에 {useCallback}을 사용하지 않았어도, 두 함수를 prop으로 받고 있는 {AppTwo}컴포넌트에서 {React.memo}의 얕은 비교 시점에서 보면, 두 함수가 새로 생성되었어도, 이전의 값과 같으므로 리렌더링을 방지할 수 있는 것 아닌가요? 왜 리렌더링이 되는거죠 ㅠ

나니야 · Answer

일단 useEffect(()=>{ console.log('re-rendering.') })를 useEffect(()=>{ console.log('re-rendering.') },[]) 로 바꿔보시고, 또 리렌더링이 되는지 안되는지 확인하려면 useEffect가 아니라, 그냥 쌩으로 console.log를 찍어보세요.

나니야 · Answer

또, 저 예시가 실제 파일로써 구분이 된건가요? 아니면 한파일내에 저렇게 선언한건가요?

notanumber · Answer

Count가 변경이되면서 App전체가 리렌더링이 일어나는데 이때 useCallback이 걸리지 않은 countUp과 countDown 또한 이전 함수를 가지고 있는게 아닌 새로운 함수를 갖고 있게 되어 실제 함수명은 같으나 주소값이 다른 함수가되는것이고 때문에 이를 얕은비교로 해보면 당연 이전 함수주소와 현재 함수주소가 다르니 AppTwo도 렌더링됩니다. 콜백 걸어주세요

React.memo 얕은비교 질문드립니다

3개의 답변

Q&A 목록