Frontend/React(2)
-
[React/Code Splitting] 컴포넌트 Dynamic import하여 lazy loading 적용하기
라우팅 구현 중에, 경로에 따라 유동적으로 컴포넌트를 호출하여 보여줄 방법을 고민하다가 대표적인 성능 개선 기법인 코드분할(code splitting)방식을 응용하여 적용한 내용입니다. 코드 분할이란? 코드 분할은 여러분의 앱을 “지연 로딩” 하게 도와주고 앱 사용자에게 획기적인 성능 향상을 하게 합니다. 앱의 코드 양을 줄이지 않고도 사용자가 필요하지 않은 코드를 불러오지 않게 하며 앱의 초기화 로딩에 필요한 비용을 줄여줍니다. 목표 1. 목록에서 선택한 값(=ID)에 따라 path 설정하여 라우팅 2. 전달받은 route param(=ID) 기준으로 필요한 컴포넌트 lazy loading하여 렌더링 구현 우선 프로젝트 구조는 아래와 같습니다. path 경로에 따라 projects 폴더 하위의 경로에 ..
2021.12.19 -
[React / Bugfix] Unknown Prop Warning
버그 내용 Warning: React does not recognize the `computedMatch` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `computedmatch` instead. If you accidentally passed it from a parent component, remove it from the DOM element. 원인 react warning computedMatch regarding some case issues? I have props named as isAuthenticated and it also..
2021.10.04