memoization

오늘의수업을 참고!!

let으로 만든것은 값은 올라가지만 화면에 보여주지 않으며,
let은 렌더링 될 때 마다 초기화가 일어난다
반면에 state는 리렌더링이 지속적으로 일어난다

스테이트를 올렸을 뿐인데 프레젠터 파일까지 리렌더링이 반복해서 일어난다 이것은 굉장히 비효율적이다

react dev tools 설치를 하고 제너럴에서 하이라이트 부분 체크를 해주면 렌더가 되는 영역을 표시해준다 노란색이면 렌더가 많이 일어나고 있다고 알려주는것!

부모가 바뀌면 자식도 같이 렌더링 되는것이다

자식이 렌더링이 되지 않도록 하려면???

리액트에서 제공하는 memo를 이용한다

memo변경 후 아까는 두칸으로 나눠서 렌더링 되던것이 한칸으로 변했고
presenter 부분은 리렌더링이 일어나지 않고 있다

콘솔창 안의 profiler부분에서 보면 MemoizationPresenterPage는 memo 되어 리렌더링이 일어나지 않는 것을 볼 수 있다

useMemo를 이용해 그 값을 기억하며 메모를 멈추고 싶을 때는 의존성 배열을 통해 값을 바꿔준다

메모한 페이지로 props를 통해 변경된 값을 넣어주면 값을 변하게 해줄 수 있다

useCallback 안에서 state를 사용하면 state 값 까지 기억을 해서 더이상 작동하지 않으므로 prev를 이용해야 한다

메모를 남용하면 오히려 퍼포먼스를 떨어뜨리기 때문에 적절한 사용이 필요하다

https://medium.com/@freshmilkdev/reactjs-render-optimization-for-collapsible-material-ui-long-list-with-checkboxes-231b36892e20
memo를 해 놓았기 때문에 빠른 퍼포먼스를 보여준 다