useCallback

onCreate 함수를 props로 받는 컴포넌트가 삭제시에도 리렌더링 되는 현상 발견

 

React.memo의 경우 얕은 복사로 리렌더링을 방지하므로,  함수를 인자를 받을 때는 useCallback()이라는 리액트 훅을 사용

≈

 

 

useCallback

https://ko.reactjs.org/docs/hooks-reference.html#usecallback

 

 

App.js의 onCreate 함수를 useCallback으로 설정 한 뒤,  일기 삭제 후의 console을 관찰 -> 리렌더링 되지 않음

하지만, 글을 추가한다면 기존의 글들이 모두 사라지고 새롭게 쓴 글만 나온다.

 

왜 그런것일까?

그 이유는 useCallback의 dependency array를 공백으로 주었기 때문이다.

처음에 마운트 될때의 data는 공백인데, useCallback으로 인해서 data가 공백인 채로 유지가 되고,

그로 인해서 모든 글이 사라지고 새롭게 쓴 글만 화면에 보이는 것이다.

 

해결방법

 dependency array를 [data] 로 둔다면, 기존과 같이 정상작동하지만,

새로고침을 할 때마다 리렌더가 발생한다는 문제가 있다.

 

함수형 업데이트를 사용한다면 해결, 아래와 같이 수정

setData((data)=>[newItem,...data])

항상 최신의 data를 함수의 인자를 통해서 참고가 가능하기 때문에 새롭게 일기를 써도 정상작동, 리렌더링도 되지 않는 것을 볼 수 있다.