React.memo, React.useCallback은 무조건 좋다?
이 또한 비용이다.
따라서, 진짜 필요할 무거운 로직을 사용할 경우 사용해야지 무지성으로 사용하게 되면
오히려 성능을 떨어트릴 수 있다.
React.portals
만약, 모달창을 구성하기 위해서 다음과 같이 구성했다고 가정했을 때
이는 정상적으로 동작은 하겠지만, 모달은 의미론적으로는 전체 페이지를 덮는 요소이다..
따라서, HTML 의미론적으로는 맞지 않다 볼 수 있다.
그래서 React.Portal을 사용하면 콘텐츠를 일반적인 곳에 랜더링 하는 것이 아니라 다른 곳에서 랜더링 할 수 있는 유용한 기능이다.
lazy loading
lazy loading은 최적화를 위한 것이다.
lazy loading은 해당 코드가 필요할 때만 그 특정 코드를 로딩하는 것을 말한다.
리액트 SPA를 사용하게 되면 결국 큰 자바스크립트 코드 번들을 빌드하게 되고, 이 사이트를 방문하는 사용자는 큰 하나의 번들을 다운로드 해야 한다.
사용자가 보고 있지 않으며, 사용하지 않는 파일 또한 모든 것을 번들을 통해 다운로드 받아야 한다는 말이다.
즉, 우리는 사용자가 최초로 보는 코드 번들을 가능한 작게 만들어야 한다.
이후, 사용자가 보고 있지 않은 특정한 페이지는 사용자가 실제 페이지를 들어올 때만 다운로드 되도록 해야 한다.
이러한 것을 lazy loading이라고 한다.
이는 코드를 여러 덩어리로, 여러 번들로 나누고 각각 필요할 때만 다운로드하는 것을 말한다.
라우팅을 사용하면 레이지 로딩을 구현하기 쉬운데, 번들을 라우트 별로 분할 후 특정 라우트에 대한 코드가 해당 라우트를 방문할 때만 다운로드 되도록 할 수 있기 때문.