Rainyjune Blog

memo 자식 Component가 재렌더링하기 부담스러운 상황이 있을 수 있는데, 이 때 memo hook을 사용하면 불필요한 재렌더링을 막을 수 있다. (https://react.dev/reference/react/memo) import {memo, useState} from 'react' // 기존 component 정의 //function ChildComponent() { // return( // Content // ) //} // memo hook을 사용한 component 정의 let ChildComponent = memo(function() { return Content }) function ParentComponent() { let [count, setCount] = useState(0) r..

React로 구성된 웹페이지는 빌드시 하나의 js파일로 통합되는데, 이 때문에 첫 페이지 로딩 속도가 느려지는 문제가 있을 수 있다. 메인 페이지에서 import 되는 component중 처음 로딩 시점부터 필요하지 않은 component가 import되는 경우도 있는데, 해당 component들을 lazy import되도록 구성하면 js파일도 분할되고, 첫 페이지 로딩 시점에 import하지 않기 때문에 로딩 속도가 개선된다. 예제 // 기존 import 문장 //import ComponentName from './pages/ComponentName.js' // lazy import로 구성한 문장 // lazy, Suspense 사용을 위해 import import { lazy, Suspense } f..