[React] 렌더링 횟수 줄이기

  컴포넌트 렌더링하고 결과 메모이제이션 하기  

- useCallback : 함수 자체를 메모리에 기록해놓고, 무언가가 바뀔때만 다시 실행하도록 함

- 컴포넌트 자체를 메모이제이션 해놓는다면?

- 부모컴포넌트가 렌더링 될 때에도 자식컴포넌트가 메모이제이션이 되어있으니 재로드 대신 그냥 가져다 쓸 수 있음

 

  React.memo  

- Medical의 자식 컴포넌트인 CommentList는 무한스크롤이 적용되면서 10개씩 내려주고 있는데

- 다음 리스트를 불러올때마다 리덕스에서 불러오는 값이 바뀌므로 재렌더링이 됨

- 그렇다면 자식 컴포넌트인 CommentList도 재렌더링이 됨(콘솔로 확인해보기)

- 이미 불러왔던 게시글까지(변화가 없음에도 불구하고) 렌더링이 되는 걸 볼 수 있음

- 따라서, 자식컴포넌트를 React.memo로 감싸줌

// 기존 코드
const CommentList = (props) => {
  console.log('재렌더링 확인!')
 
 ...

  return (
  
  ...
  )
}
export default CommentList;


// React.memo로 감싸주기
const CommentList = React.memo((props) => {
  console.log('재렌더링 확인!')
 
 ...

  return (
  
  ...
  )
})
export default CommentList;